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
  • 197,815
  • 30
  • 248
  • 265
Vincent Tang
  • 3,332
  • 5
  • 37
  • 56

1 Answers1

17

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
  • 197,815
  • 30
  • 248
  • 265