在CSS伪类的"内容"内动态生成文本

Question

我想以正确的方式动态生成CSS伪类的'content'内的文本.到目前为止,我已经填充了一个有效的jsfiddle.这张照片更好地展示了我想要实现的目标:

这是相关的代码(它也在小提琴中):

[index.php的一部分]:

<div class="checkbutton">
  <input type="checkbox" value="None" id="slideThree" name="check"/>
  <label for="slideThree"></label>
</div>

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

我希望能够将该代码重用于两个目的:

1. 使用PHP动态和内部转换它.
2. 不同的按钮与类似的风格.

这意味着,我希望能够创建一个类似的按钮,但名称不同,或者只是翻译它而不需要额外的标记.我不知道如何正确地做到这一点.原因如下:

• CSS位于一个独特的.css文件中,与内容分开.显然,这不会执行php.
• 内联样式中不可能有CSS伪元素
• 没有JavaScript.虽然这可以通过javascript实现,但我更愿意在可能的情况下避免使用它.

我怎样才能实现它？我觉得奇怪的是我需要使用CSS

Answer 1

只要您能够将所需内容设置为属性,就可以使用该attr()函数来抽象样式:

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>

带有前缀的自定义属性data-是HTML5的一部分: 使用data-*属性嵌入自定义不可见数据