I have the following css:
.example:before {
content: " $ ";
margin-left: 4px;
color: #666;
}
I'd like to change the 'content' using jQuery. What selector to I use to access this element?
I have the following css:
.example:before {
content: " $ ";
margin-left: 4px;
color: #666;
}
I'd like to change the 'content' using jQuery. What selector to I use to access this element?
You can't directly access :before
or :after
with Javascript at all. The only way I know to modify them at runtime is to use an attribute, but that sort of defeats the purpose of having css add content in the first place....
HTML
<div class="example" title=" $ ">Something in the div</div>
CSS
.example:before {
content: attr(title); /* use the value of the title attribute */
margin-left: 4px;
color: #666;
}
Javascript
$(".example").attr("title", " £ ");
Like I said, this sort of negates the whole point of the :before
selector and you may as well simply prepend something using Javascript anyway.