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:

Example of what I want to achieve

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

gap between posting question and posting own (long) answer is? — Waygood, Apr 23 '13 at 13:14
You constructed your question and posted it, then a few seconds later posted the answer! Did you have it already prepared? — Waygood, Apr 23 '13 at 13:16
No, I wrote the answer slowly after the question since it occurred to me while writing it. There's a checkbutton while you are writing a question called "Answer your own question" as suggested in the [official stackoverflow blog](http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/) that expands the page and let's you answer it in the same spot. Hope that downvote wasn't yours and for me answering my own question... — Francisco Presencia, Apr 23 '13 at 13:18
As read in the link I just put, **`it is not merely OK to ask and answer your own question, it is explicitly encouraged.`** — Francisco Presencia, Apr 23 '13 at 13:22

cimmanon · Accepted Answer · 2013-04-23T14:10:50.797

10

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

edited Apr 23 '13 at 14:10

answered Apr 23 '13 at 13:56

cimmanon

67,211
17
165
171

For 2 elemts I could do `
`, right?
– Francisco Presencia Apr 23 '13 at 14:04

score 0 · Answer 2 · answered Apr 23 '13 at 13:10

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.

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

2 Answers2