pesudo element change property values

[sobhan konari]

hi guys.
is impossible to change a property value in style.css by search and replace.
for ex . I want to change width of a psudo element dynamicly.

span:after{
        content:"";
    top:0;
    left:0;
    position: absolute;
        background-color:red;
        height:20px;
       width:0;
}

and this is the best practice.or website maybe slow.

thanks.

[Paulie_D]

Pseudo-elements can’t be selected by JS as the aren’t in the DOM.

Frankly, I’m not entirely sure what it is you are trying to do but changing the CSS stylesheet would require a regex parse I think.

These things are usually handled by changing classes and affecting the pseudo-elements that way.

[Shikkediel]

Pseudos can be selected with JS (which I didn’t realise until shortly) but are only readable. Changing their properties isn’t possible. What you would be looking for is this:

https://developer.mozilla.org/en-US/docs/Web/API/CSSRule

Like Paulie mentioned, the script will need to use a regex and go through the entire stylesheet to find a match. Both the external accessing of the file and especially this search will certainly be a slow and “intensive” approach.

An example, I found it quite complicated:

https://codepen.io/Shikkediel/pen/QwKMBQ

[Author]

Posts