在CSS伪类的“content”中动态生成文本

4
我希望你能以正确的方式动态生成CSS伪类'content'中的文本。我已经在working jsfiddle中展示了我的例子。这张图片更好地展示了我想要实现的效果:

Example of what I want to achieve

这是相关的代码(它也在fiddle中):

[part of] 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实现这一点很奇怪。


1
发布问题和发布自己的(长篇)答案之间的时间差是多少? - Waygood
你是什么意思,@Waygood? - Francisco Presencia
你提出了问题并发布了它,然后几秒钟后就发布了答案!你之前已经准备好了吗? - Waygood
不,我是在写问题的时候突然想到答案,所以慢慢地写出来的。当你写问题时,有一个名为“回答自己的问题”的复选框,正如官方stackoverflow博客所建议的那样,它会扩展页面并让你在同一位置回答问题。希望那个踩踏按钮不是你按下的,因为我回答自己的问题... - Francisco Presencia
1
正如我刚刚提供的链接所述,“提出并回答自己的问题不仅可以,而且明确鼓励这样做。” - Francisco Presencia
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-* 属性嵌入自定义非可见数据


对于2个元素,我可以这样做 <div class="checkbutton" data-checked_first="男人" data-checked_second="女人" data-unchecked="女人">,对吗? - Francisco Presencia

0
在写了问题并且花费了很多精力寻找解决方案后,我将其发布出来,以防有人发现它有用。 它位于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;
  }

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,