25

问题

我可以只为单个角色的一部分设置样式吗？

意义

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 Awesomeicon-star符号。如果我有一个动态宽度的叠加层，难道不能创建一个精确的分数可视化吗？

4

2 回答 2

10

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

首先要做的事：演示

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

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

扩展演示

于 2012-06-17T10:42:27.800 回答
5

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

基本上：

  1. 开启position:relative_.content
  2. :after绝对定位
  3. 设置:after为overflow:hidden
  4. 调整宽度、高度、文本缩进和行高:after以隐藏它的位。

我不确定它是否能很好地跨浏览器运行——这些em值可能会有所不同。（显然它在 IE 7 或更低版本中绝对行不通。）

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

于 2012-06-21T07:29:43.583 回答