Access pseudo class element attribute width from scss

Question

I'm trying to change width and height of pseudo-class element through the attribute. I'm doing this because I cannot change pseudo element in javascript. What's wrong in my code? Mozilla says its posible: https://developer.mozilla.org/en/docs/Web/CSS/attr#Examples

.loader::before {
height: 30px;
width: attr(data-width);
display: block;
position: absolute;
background-color: red;
content: '';}

javascript:

$('.loader').attr('data-width', '100px');});

https://jsfiddle.net/9j2pbbzd/

_“Mozilla says its posible”_ - scroll down to the Browser compatibility section ... — CBroe, Aug 28 '17 at 14:53
http://jsfiddle.net/CaioToOn/wp7Wc/4/ this is what you want? — Dmytro Lishtvan, Aug 28 '17 at 14:59

score 0 · Answer 1 · answered Aug 28 '17 at 15:47

0

Be careful, at the moment you can use attr() just into content property. Look at this similar answer https://stackoverflow.com/a/27529435/1849721

answered Aug 28 '17 at 15:47

Vincenzo Rizza

31
4

score 0 · Answer 2 · answered Aug 28 '17 at 16:48

0

What if you create a class with the width/height you want the pseudo element to have and use JS to add/remove this classes as you want to ?

answered Aug 28 '17 at 16:48

André C. Rocha

301
5
17

Access pseudo class element attribute width from scss

2 Answers2