Question

我想以正确的方式在CSS伪类的'content'中动态生成文本。到目前为止，我的示例中填写了 working jsfiddle 。这张照片更好地展示了我想要实现的目标：

Example of what I want to achieve

这是相关的代码（它也在小提琴中）：

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

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

使用PHP动态和内部翻译它。
具有相似风格的不同按钮。

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

CSS位于一个独特的.css文件中，与内容分开。显然，这不会执行php。
It's not possible to have CSS pseudo elements inside inline styles
没有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的一部分：Embedding custom non-visible data with the data-* attributes

Answer 2

在写完问题以及我找到解决方案花了多少麻烦之后，我发布它以防有人发现它有用。它位于 this fiddle 以及相关代码中：

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

[style.css：

的一部分

.checkbutton .leftcheck
  {
  position: absolute;
  left: 0px;
   width: 50%;
  text-align: center;
  line-height: 28px;
  color: CornflowerBlue;
  }

当然，如果你有更好的方法，请把它写成答案。

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

2 个答案: