CODEWITHSUNDEEP
htmlcsspseudo-element
neku894
neku894

Reputation: 396

Two pseudo elements ::before with different properties

Used two pseudo elements ::before with different border properties (see js fiddle). Despite "you can use only one ::before and one ::after pseudo element" this actualy worked. Why?

https://jsfiddle.net/8L7zou3e/1/

<div class="el"></div> 

.el {
    position: relative;
    margin: 100px 0 0 500px;
    width: 300px;
    height: 100px;
    background-color: #AA4343;
}
.el:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    position: absolute;
    top: 0;
    left: -50px;
}

.el:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    position: absolute;
    top: 0px;
    left: -50px;
}

Upvotes: 1

Views: 119

Answers (2)

Soolie
Soolie

Reputation: 1797

You seem to have only one pseudo element.

cons

And that's here in the UI:

pseudo

Your CSS cascades to:

.el:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 50px solid #e86d0a;
  border-left: 50px solid transparent;
  position: absolute;
  border-bottom: 50px solid #e86d0a;
  border-left: 50px solid transparent;
  top: 0;
  left: -50px;
}

See the way Chrome has treated your combined CSS:

chrome treatment

Upvotes: 6

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382434

There's only one pseudo-element but the properties are added because the two rules apply to that pseudo-element.

Your CSS is equivalent to

.el {
    position: relative;
    margin: 100px 0 0 500px;
    width: 300px;
    height: 100px;
    background-color: #AA4343;
}
.el:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    position: absolute;
    border-bottom: 50px solid #e86d0a;
    border-left: 50px solid transparent;
    top: 0;
    left: -50px;
}

It's similar to this case which probably is more obvious:

a {
   color: red;
}
a {
   font-weight: bold;
}

Upvotes: 3

Related Questions