Change height of :after selector dynamically

Asked Oct 18 '18 at 13:16

Active Oct 18 '18 at 13:17

Viewed 27 times

I try to change the height of pseudo select :after dynamically with CSS or jQuery, but I can't figure out, this is my code:

html

<ul>
  <li>laravel <span data-perc='100'></span>
</li>

css

.skills ul li span:after{
    content: '';
    position: absolute;
    width: 8px;
    bottom: 0px;
    background-color: #ff6600;
    outline: 2px solid #000;
    outline-offset: 0px;
    height: attr(data-perc px);
}

edited Oct 18 '18 at 13:17

j08691

197,815
30
248
265

asked Oct 18 '18 at 13:16

Malek Ben el ouafi

1

use css variable, just answered one right now : https://stackoverflow.com/questions/52874362/pass-variable-from-css-or-html-to-inline-svg/52874918#52874918 – Temani Afif Oct 18 '18 at 13:17
here is a more generic solution : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/49618941#49618941 – Temani Afif Oct 18 '18 at 13:18
I try to find other solution without use the style attr in element – Malek Ben el ouafi Oct 18 '18 at 13:21
then check the duplicate for some JS workaround – Temani Afif Oct 18 '18 at 13:22

Change height of :after selector dynamically

0 Answers0