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

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:

1. Dynamically and internally translate it with PHP.
2. 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.