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

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符号设计样式.如果我有动态宽度的叠加层,是否应该可以创建精确的分数可视化？

Answer 1

在玩一个演示小提琴时,我自己想出来并希望分享我的解决方案.这很简单.

首先要做的事:DEMO

要对单个字符进行部分设置,您需要为内容添加额外标记.基本上,您需要复制它:

<?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属性或多个属性的组合.

扩展的DEMO

Answer 2

你的解决方案很棒.我有一个:after在Chrome 19 中使用的版本(而不是复制HTML中的内容).

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

基本上:

1. 设置position:relative上.content
2. :after绝对的位置
3. 设置:after为overflow:hidden
4. 调整宽度,高度,文本缩进和行高,:after以隐藏它的位.

我不确定它是否能在跨浏览器上运行良好 - em价值可能会有所不同.(显然它肯定不适用于IE 7或更低版​​本.)

此外,您最终必须复制CSS文件中的内容而不是HTML,这可能不是最佳的,具体取决于具体情况.