Как добавить два элемента: before?

Question

Я пытаюсь сделать веб-сайт с минимальной HTML разметкой для презентации.
Имею следующий тег HTML:

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

Мне нужно добавить два элемента перед использованием CSS1 для фона и 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, есть ли способ указать более одного?

Answer 1

Не знаю, как бы вы применили n элементов, но только для двух (и особенно здесь), мне кажется, вы можете просто использовать :after для второго элемента. ..

Answer 2

Два before с будут только в будущем.Ни один браузер не поддерживает его сейчас.

Здесь спецификация: http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting

А второй before будет работать как div::before::before или div::before(2)

Answer 3

почему бы не использовать фоновое градиентное изображение вместо

ты тогда звонишь Что-то вроде

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

Answer 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;
}

Answer 5

Я не уверен.Вы пробовали что-то вроде .title:before:before?Может быть, это помогает ... Не могу проверить это прямо сейчас.