如何添加两个 :before 元素？答案

【问题标题】：How do I add two :before elements?如何添加两个 :before 元素？
【发布时间】：2012-06-26 00:17:04
【问题描述】：

我尝试用最少的HTML 标记制作网站。
具有以下HTML 标签：

<div class="title">I'm a title!</div>

我需要在使用CSS 之前添加两个元素，1 个用于背景，1 个用于阴影。比如：

.title
{
    display: block;
    position: relative;
}
.title:before
{
    display: block;
    background-color: #00FFFF;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}
.title:before
{
    display :block;
    background-color: #111111;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 5px -5px -5px 5px;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}

不起作用，因为第二个 .title:before 覆盖了第一个。我无法将背景添加到元素，因为我需要它具有不透明度。有没有办法在不添加额外标记的情况下做到这一点？如果答案是不使用两个 :before 元素，有没有办法指定多个元素？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

不确定如何应用 n 元素，但只有两个（尤其是这里）在我看来你可以只使用 :after 作为第二个元素...

【讨论】：

我知道，但我有点希望能找到适合 n 个元素的解决方案。

【解决方案2】：

我不确定。你试过像.title:before:before这样的东西吗？也许这有帮助...现在无法测试它。

【讨论】：

【解决方案3】：

为什么不使用背景渐变图像来代替

然后你打电话给类似的东西

background : url("../images/image_path.png") 0 0 no-repeat;

【讨论】：

我正在尝试建立一个没有像这样的“黑客”的网站。
我不会说使用背景图像是一种 hack :-)
纯色背景图片不是破解的吗？透明的 1 像素图像用于调整大小呢？一样的。

【解决方案4】：

我不明白你为什么不能只使用...

.title
{
    display: block;
    position: relative;
    background-color: #00FFFF;
}
.title:before
{
    display :block;
    background-color: #111111;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 5px -5px -5px 5px;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}

【讨论】：

因为我需要背景不透明而不是文本
我很困惑。你的意思是透明度（而不是不透明度）？
我不知道这个词是什么。我的意思是它会与背景融为一体。

【解决方案5】：

两个befores 将只在未来。现在没有一个浏览器支持它。

此处说明：http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting

第二个before 将像div::before::before 或div::before(2) 一样工作

【讨论】：