Question

http://fiddle.jshell.net/hutber/uAczq/是解释它的最简单方法。

/html
<div title="1%">
    1% 
    <div class="background rating_90"></div>
</div>
//css
.rating {
    display: block;
    width: 100%;
    height: 18px;
    line-height: 18px;
    border: 1px solid #7F7F7F;
    position: relative;
    text-align: center;
    border-radius: 3px;
}

.rating .background.rating_90 {
    width: 90%;
}
.rating .background {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: #75890C;
    border-right: 1px solid #7F7F7F;
}

目前，内部的文字将不可见，而.background位于文字的前面。

我不想在父div

中添加其他元素

Answer 1

使用z-index: -1。

z-index只能用于显式定位的元素。这意味着position: relative;或position: absolute;的所有内容都可以放置在Z窗格上，或者为了更好地理解页面中的“深度”级别。

执行：

.rating .background {
   z-index: -1;
   /* The rest of your CSS */
}

您也可以删除content: '';，因为它对非伪选择器没有影响。

<强> See Fiddle here.

Answer 2

首先，您不需要content属性，因为这不是伪元素。

但是，您需要设置bg div的z-index

JSfiddle Demo

CSS（摘录）

.rating .background {
   z-index:-1; /* add this */
}

内容不在内容HTML后面的元素前面

2 个答案: