7

What is the default display: properties of :AFTER and :BEFORE pseudoelements after you specify content.

Is it display: inline or display: inline-block?

Could not find it in default css values list

Example:

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Before: Am I inline-block or inline?";
  color:red;
 }

div:after {
  content: "After: Am I Inline-block or inline?";
  color:green;
 }
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Vincent Tang
  • 3,758
  • 6
  • 45
  • 63

1 Answers1

18

The :before and :after pseudo-elements are inline by default.

As the W3 spec says:

In a :before or :after pseudo-element declaration, non-inherited properties take their initial values.

And the initial value of the display property is inline.

j08691
  • 204,283
  • 31
  • 260
  • 272