仅使用 CSS 内容更改一个字符答案

【问题标题】：Change one character only using CSS content仅使用 CSS 内容更改一个字符
【发布时间】：2015-07-20 22:23:07
【问题描述】：

我继承了将字体标题分层的代码 - 多个 div 绘制字体 - 像这样：

<div class = 'stage'>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
</div>

文本本身在“layer.after”下的css中定义为“content：“xyz！”。

我的目标是设置“！”的样式在“XYZ”中以不同的字体...如果内容在 HTML 部分中，我可以添加一个跨度。

但是在这里，我的文本是在 CSS 中的内容中定义的...。在这种类型的设置中，我如何才能将最后一个字母的样式与其余字母的样式不同，或者在 CSS 中添加一个跨度，甚至是一个短脚本来更改最后一个字母（！）到不同的字体？我试过最后一个字母选择器无济于事。

【问题讨论】：

标签： css html

【解决方案1】：

在伪元素上使用伪类是not allowed。因此，如果不更改现有代码，就不可能实现您想要的。

【讨论】：

实际上，它can be kind of achieved 通过将 pseudo elements 应用于伪元素（例如“相交”它们）。但这种 hack 有太多限制，无法在实践中使用。

【解决方案2】：

HTML 中有一些实际的文本吗？如果不是，您可以使用::before 输入文本，使用::after 输入“！” - JSFiddle

CSS

.layer::before { 
    content: 'xyz';
    color: blue;
    font-weight: bold;
}
.layer::after { 
    content: '!';
    color: red;
    font-weight: bold;
}

【讨论】：

【解决方案3】：

如果无法更改标记，您将需要使用一些脚本。

如果您有 jQuery，请尝试以下操作：

$(function() {

  $(".stage .layer").each(function() {
    var content = $(this).html();
    content = content.substr(0, content.length - 1)
      + "<span>"
      + content.substr(-1)
      + "</span>";
    $(this).html(content);
  });


})

请参阅http://codepen.io/ondrakoupil/pen/VLBoXR 以获取实时示例。

【讨论】：