关于html：如何使用动态宽度为叠加层设置单个字符的一部分？


How can I style a part of a single character with overlays using a dynamic width?

问题

我可以只设计一个角色的一部分吗？

意义

CSS属性不能分配给部分字符。但是，如果您只想为角色的某一部分设置样式，那么就没有标准化的方法可以做到这一点。

例子

有没有可能设计一个"X"，中间是红色，然后是黑色？

Expected result

不工作代码

1
    X
1
2
3
4
5
6
7
8
9
10
11
12
13
.content {
    position: relative;
    font-size: 50px;
    color: black;
}

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

JSfiddle演示

目的

我的目的是为字体设计一个很棒的icon-star符号。如果我有一个动态宽度的覆盖，是否可以创建一个精确的分数可视化？

相关讨论

在玩演示小提琴的时候，我自己想出来，想分享我的解决方案。这很简单。

首先：演示

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

1
2
3
<?div class="content">
    <span class="overlay">X</span>
    X

使用诸如：after或：before之类的伪元素会更好，但我没有找到实现这一点的方法。

覆盖需要绝对定位到内容元素：

1
2
3
4
5
6
7
8
9
10
11
12
?.content {
    display: inline-block;
    position: relative;
    color: black;
}

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

不要忘记overflow: hidden;，以便切断"x"的剩余部分。

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

扩展演示

很好的解决方案。我有一个版本使用了在Chrome19中工作的:after(而不是复制HTML中的内容)。

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

基本上：

  • 在.content上设置position:relative。
  • 位置:after绝对
  • 将:after设置为overflow:hidden。
  • 调整:after的宽度、高度、文本缩进和行高，以隐藏其位。

    • 不过，我不确定它是否能在跨浏览器中正常工作——em的值可能会有点不同。(显然，它在IE7或更低版本中肯定不起作用。)

    此外，您最终不得不复制CSS文件中的内容而不是HTML，根据具体情况，这可能不是最佳选择。

    相关讨论