Changing CSS content property dynamically

Question

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;
}

Refer to [this answer](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after), it's only possible using workarounds. — Azeirah, Dec 02 '14 at 21:15
I changed your profile image, @BarnabásNagy; that one wasn't really appropriate here. Thanks! — Andrew Barber, Dec 02 '14 at 22:09

score 12 · Accepted Answer · answered Dec 02 '14 at 21:30

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.

score 1 · Answer 2 · answered Dec 02 '14 at 21:03

1

Write a Javascript function that updates the CSS. Javascript can access the HTML attribute.

document.documentElement.lang

answered Dec 02 '14 at 21:03

caleb.breckon

1,336
18
42

Sorry, I was not clear with my request. I have no problem with getting the value of the lang attribute. The problem is changing the "content" property. – Barnabás Nagy Dec 02 '14 at 21:07

Changing CSS content property dynamically

2 Answers2

Linked