1

How is it possible to add css for the pseudo elements of the class dynamically.

<?php if ($_option->getDescription()): ?>
    <span class="questiontooltip-wrap">
        <p class="questiontooltip" id="tooltip_<?php echo $_option->getId()?>">?</p>
        <p class="note" id="content_<?php echo $_option->getId()?>" style="display:none">
            <?php echo $_option->getDescription() ?>
        </p>

<?php endif; ?>

This is my script

<script>
    jQuery(document).ready(function ($) {
        //$(".note").hide();
        $(".questiontooltip").click(function(){ 
            var titleid = "#opt-title_"+res;
            var titlewidth = $( titleid).outerWidth();//alert(titleht);
            $(".note:after").css("left", titleht+"px");

            //my actions
        });     
    });
</script>

I have the width value in variable titlewidth. I want to add this value to the before and after elements of class .note dynamically. Is there any way to do this? I have tried the above way. But not working.

V.P
  • 131
  • 6
  • 1
    The only way to target those pseudo elements is through css, so you could use this answer I made a while ago, it might help: https://stackoverflow.com/questions/41832491/manipulate-css-psuedo-after-properties/41836514#41836514 – somethinghere Jul 06 '17 at 10:45
  • did you try to use jquery before() and after() functions – hasan Jul 06 '17 at 11:08
  • Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – freedomn-m Jul 06 '17 at 11:21
  • Another: https://stackoverflow.com/questions/8968992/jquery-and-pseudo-elements – freedomn-m Jul 06 '17 at 11:22

0 Answers0