Question

我继承了对字体标题进行分层的代码 - 多个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添加跨度，或者甚至更改短脚本以进行更改最后一个字母（！）到不同的字体？我试过最后一个字母选择器无济于事。

Answer 1

在伪元素上使用伪类是not allowed。因此，如果不更改现有代码，则无法实现所需。

Answer 2

HTML中是否有一些实际的文字？如果不是，您可以使用::before作为文字，::after作为＆＃34;！＆＃34; - JSFiddle

CSS

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

Answer 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。

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

3 个答案: