How do I add two :before elements?

Question

I try to make web site with minimal HTML markup for presentation.
Having the following HTML tag:

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

I need to add two elements before it using CSS, 1 for background and 1 for shadow. Something like:

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

doesn't work because the second .title:before overrides the first. I cant add the background to the element because I need it to have opacity. Is there any way to do this without adding additional markup? And if the answer is somehow not using two :before elements is there any way to specify more then one?

Answer 1

I am not sure. Have you tried something like .title:before:before? Maybe this helps... Not able to test it right now.

Answer 2

why don't use backgroungd gradient image instead

you call then Something like

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

Answer 3

I dont understand why you cant just use...

.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 4

Not sure how you'd apply n elements, but for only two (and especially here) it seems to me you could just use :after for the second element...