题
我可以只扮演一个角色的一部分吗？
含义
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;
}
目的
我的意图是造型“字体Awesome icon-star”符号.如果我有一个动态宽度的叠加层,是不是可以创建一个精确的分数可视化？
解决方法
在玩演示小提琴的同时,我想出了自己的想法,想分享我的解决方案.这很简单
第一件事：The DEMO
要部分风格单个字符,您需要额外的标记为您的内容.基本上你需要复制它：
<div class="content">
<span class="overlay">X</span>
X
</div>
使用伪元素,如：之后或之前会更好,但我没有找到一种方法来做到这一点.
覆盖层需要绝对定位到内容元素：
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
不要忘记溢出：隐藏;为了切断“X”的剩余部分.
