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 */
}

备注：

如果跨度中的字符与*不同，那么它们会在其后面显示* s，因此您必须在.overlay-text（例如白色）中添加纯色背景。

将负z-index添加到伪元素会使其无法选择但我认为根据您的需求声明应该没问题。

Demo

Answer 2

尝试从position:absolute; left:0;删除.overlay-text:after。如果您需要，可以在.overlay-text中使用 Demo

CSS：

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

Answer 3

FIDDLE

 .overlay-text:before {
  content: '###';
  color: blue;
  position:relative;
  }
.overlay-text {
  position: absolute;
  left: 0;
  content: '******';
  color: red;
}

最后，我理解你的问题，只是添加位置。它会解决你的问题。

编辑 Demo

它调用z-index和定位。给出负z-index。

之后使用css叠加文本

3 个答案: