4

我想以正确的方式在 CSS 伪类的“内容”中动态生成文本。到目前为止，我已经用我的例子填充了一个工作 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.ini。
  • 内联样式中不可能有 CSS 伪元素
  • 没有 JavaScript。虽然这可以通过 javascript 实现，但我更愿意尽可能避免使用它。

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

4

2 回答 2

10

只要你有能力将你想要的内容设置为一个属性，你就可以利用这个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-* 属性嵌入自定义不可见数据

于 2013-04-23T13:56:31.553 回答
0

在写完问题以及我找到解决方案花了多少麻烦之后，我发布它以防有人发现它有用。它在这个小提琴和相关代码中：

[部分] 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;
  }

当然，如果您有更好的方法，请将其写为答案。

于 2013-04-23T13:10:55.283 回答