Menu
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>
378
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.
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.
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.
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.
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.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
