0

HTML working with class="line1"

            <div class="line line1 row" onscroll="myFunction()">
                <div class="tag bold flex tagline col-sm-2">
                    HTML / CSS
                </div>
                <div class="tag-percent col-sm-1 ml-auto"><span>95%</span></div>
            </div>

CSS max-width: 10%; at pseudo:after element

   .line1:after{
    max-width: 10%
     }

Script to set max-width to 85%

<script>
    function myFunction(){
        const element = document.querySelector('.line1:after');
        element.style.maxWidth = "85%";
        console.log(element);
            }

  </script>

I tried using using getComputedStyle.getPropertyValue but it is read-only. Can anyone solve it using jQuery or JavaScript.

Siddharth Chauhan
  • 1

1 Answers1

1

you can't select the pseudo element. so u can add one more class call line1-after

in css put 

.line1-after:after{
 max-width: 85%
}

add this class

$('.line1').addClass("line1-after");
mr. pc_coder
  • 16,412
  • 3
  • 32
  • 54