如何使用覆盖层在动态宽度下样式化单个字符的一部分？

Question

问题

我能否只对单个字符的某一部分进行样式设置？

意思

CSS属性不能被赋给字符的部分。但如果你想要仅对某个字符的特定部分进行样式设置，目前没有标准化的解决方案。

示例

是否有可能对一个带有红色和黑色交替的“X”进行样式设置？

未能生效的代码

<div class="content"> 
    X
</div>

.content {
    position: relative;
    font-size: 50px;
    color: black;
}

.content:after {
    content: 'X';
    color: red;
    width: 50%;
    position: absolute;
    overflow: hidden;
}

在 jsFiddle 上查看演示

目的

我的意图是样式化 Font Awesome 的 icon-star 符号。如果我有一个动态宽度的叠加层，难道不应该可以创建一个精确可视化分数的方式吗？

- Alp

---

我见过类似的东西在由Ricardo Lafuente和Ana Carvalho展示的LGM上：colorfont.js。 - Bobby

我最近问了一个类似的问题，得到了更多的关注。你可以在这里找到它。https://dev59.com/2mAg5IYBdhLWcg3wdauF - SimplyAzuma

Answer 1

在玩一个演示fiddle时，我自己想到了解决办法并想分享一下，它非常简单。

首先： 演示

要对单个字符进行部分样式设置，需要为您的内容添加额外的标记。基本上，您需要将其复制：

<​div class="content"> 
    <span class="overlay">X</span>
    X
</div>

使用像:after或:before这样的伪元素会更好，但我没有找到实现的方法。

覆盖层需要绝对定位在内容元素上：

​.content {
    display: inline-block;
    position: relative;
    color: black;
}

​.overlay {
    width: 50%;
    position: absolute;
    color: red;
    overflow: hidden;
}​

不要忘记使用overflow: hidden;来截断“X”后面的部分。

您可以使用任何宽度来代替50％，这使得此方法非常灵活。 您甚至可以使用自定义高度，其他CSS属性或多个属性的组合。

扩展演示

- Alp

---

我该如何做，但使用具有透明背景的图像？ - Asaf

不确定您在问什么。请创建一个新问题。 - Alp

Answer 2

你的解决方案做得很好。我有一个版本，使用:after（而不是在HTML中复制内容），可以在Chrome 19中工作。

• http://jsfiddle.net/v5xzJ/4/

基本上：

1. 在.content上设置position:relative
2. 绝对定位:after
3. 将:after设置为overflow:hidden
4. 调整:after的宽度、高度、文本缩进和行高以隐藏其中的部分。

我不确定它是否适用于跨浏览器——em值可能会有所不同。（显然，在IE 7或更低版本中肯定不起作用。）

此外，你最终需要在CSS文件中复制内容，而不是在HTML中复制，这取决于具体情况，可能不是最优选择。

- Paul D. Waite

---

这是一个很好的解决方案！我喜欢干净的标记语言。现在，人们可以选择是否要在HTML或CSS中复制其内容。 - Alp