CODEWITHSUNDEEP
htmlcsscss-selectors
Daniel
Daniel

Reputation: 31579

How do I add two :before elements?

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?

Upvotes: 0

Views: 790

Answers (5)

Rustam
Rustam

Reputation: 1923

Two befores will be only in future. No one browser supports it now.

Here specification: http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting

And second before will be working like div::before::before or div::before(2)

Upvotes: 0

annakata
annakata

Reputation: 75794

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

Upvotes: 1

barrylloyd
barrylloyd

Reputation: 1589

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

Upvotes: 0

Salil
Salil

Reputation: 47482

why don't use backgroungd gradient image instead

you call then Something like 

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

Upvotes: 0

Fidi
Fidi

Reputation: 5834

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

Upvotes: 0

Related Questions