Menu
A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#add_to_cart:before {
display: block;
font-family: 'sosa';
font-size: 35px;
content: "Ä";
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: #fff;
}
648
asked Oct 21 '25 11:10
Try this:
HTML:
<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>
CSS:
#add_to_cart:before {
display: block;
font-size: 35px;
content: attr(data-content);
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: red;
}
JS:
$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
