Dynamically generate text inside 'content' of a CSS pseudo-class - php

Question

I want to dynamically generate the text within 'content' of a CSS pseudo class in the proper way. I have filled a working jsfiddle with my example so far. This picture shows better how I want to achieve this:
This is the relevant code (it's in the fiddle also):
[part of] index.php:
<div class="checkbutton">
<input type="checkbox" value="None" id="slideThree" name="check"/>
<label for="slideThree"></label>
</div>
[part of] style.css:
.checkbutton:before
{
content: 'Hombre';
float: left;
width: 60px;
text-align: center;
/* 28 es la altura total */
font: 12px/28px Arial, sans-serif;
color: CornflowerBlue;
z-index: 0;
font-weight: bold;
}
I want to be able to reuse that code for two purposes:
Dynamically and internally translate it with PHP.
Different buttons with similar style.
This means, I want to be able to create a similar button but with different names, or just translate it without extra markup. I have no idea how to do this properly. Here's why:
The CSS is in a unique .css file, separated from the content. Obviously, this doesn't execute php.
It's not possible to have CSS pseudo elements inside inline styles
No JavaScript. While this could be achieved with javascript, I prefer to avoid it where possible.
How can I achieve it? I find it odd that I need to use CSS for

Answer 1

As long as you have the ability to set the content you want as an attribute, you can make use of the attr() function to abstract your styles:
http://tinker.io/bda2e
.checkbutton:before {
content: attr(data-checked);
}
<div class="checkbutton" data-checked="Hombre" data-unchecked="Mujer">
<input type="checkbox" value="None" id="slideThree" name="check"/>
<label for="slideThree"></label>
</div>
Custom attributes with the prefix of data- are a part of HTML5: Embedding custom non-visible data with the data-* attributes

Answer 2

After writing the question and how much trouble it took me to find a solution, I post it in case someone finds it useful. It's in this fiddle and the relevant code here:
[part of] index.php:
<div class="checkbutton">
<input type="checkbox" value="None" id="slideThree" name="check" checked />
<label for="slideThree"></label>
<!-- Now this can be generated with PHP -->
<span class = "leftcheck"><?= "Hombre"; ?></span>
<span class = "rightcheck"><?= "Mujer"; ?></span>
</div>
[part of] style.css:
.checkbutton .leftcheck
{
position: absolute;
left: 0px;
width: 50%;
text-align: center;
line-height: 28px;
color: CornflowerBlue;
}
Of course, if you have a better method, please write it as an answer.