Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the default display property of the :before and :after pseudo-elements?

Tags:

html

css

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>
like image 378
Vincent Tang Avatar asked Dec 11 '17 15:12

Vincent Tang


People also ask

What is before and after pseudo-elements?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What property is used with the before and after pseudo-elements to insert generated content?

The ::before and ::after pseudo-elements can be used to insert generated content either before or after an element's content. The content CSS property is used in conjunction with these pseudo-elements, to insert the generated content.

What does the pseudo selectors allows us to do before and after?

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element. Insert content before, or after, the content of an element.

What does the pseudo-element :: Before do?

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.


1 Answers

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.

like image 199
j08691 Avatar answered Oct 25 '22 09:10

j08691