html - 之后使用 css 覆盖文本

Question

我正在尝试在 div 上添加覆盖文本，如果它没有所需的字符数。

请参阅此 jsfiddle:http://jsfiddle.net/jason99/LYxmF/

前三个字符应为蓝色，其余为红色。

CSS代码

.overlay-text {
    color: blue;
    z-index: 10;
}
.overlay-text:after {
    position: absolute;
    left: 0;
    content: '******';
    color: red;
}

HTML

<span class="overlay-text">***</span>

Answer 1

您可以通过向伪元素添加负 z-index 并将其相对于主跨度绝对定位来实现此效果。

.overlay-text {
    color: blue;
    z-index: 10;
    position: relative; /* Added this */

}
.overlay-text:after {
    content: '******';
    color: red;
    position: absolute;
    left: 0;
    z-index: -1; /* Added this */
}

注意事项:

1. 如果 span 中的字符与 * 不同，那么它们会在其后面显示 *s，因此您必须向 .overlay-text 添加纯色背景(比如白色).
2. 向伪元素添加一个负的 z-index 会使其无法选择，但我想根据您的要求声明，这应该没问题。

Demo