Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:before

[CSS Selector] E:before

『selector:before』generates a first child element for the element, commonly known as the『:before pseudo-element』. It does not work in IE7 and below.

When generating a『:before pseudo-element』, you must specify the『content』property. Without it, the pseudo-element will not be generated. To create a『:before pseudo-element』with no text content, pass an empty string to the『content』property.

Sample Code

div:before { content: "Hello World";} /* Generates a ':before pseudo-element' containing the text "Hello World". */
p:before {} /* No 'content' property specified, so no ':before pseudo-element' is generated. */
div.div1:before { content: ""; display: block; height: 10px; background-color: red;} /* Pass an empty string like this to output no text. */

Browser Preview

div:before { content: "Hello World";} /* Generates a ':before pseudo-element' containing the text "Hello World". */
p:before {} /* No 'content' property specified, so no ':before pseudo-element' is generated. */
div.div1:before { content: ""; display: block; height: 10px; background-color: red;} /* Pass an empty string like this to output no text. */

<div> A ':before pseudo-element' is generated.</div>
<p>No ':before pseudo-element' is generated because no 'content' property is specified.</p>
<div class="div1">A red line is generated using a ':before pseudo-element'.</div>

The default value of the『display』property for a『:before pseudo-element』is『inline』.

Note that the『:before pseudo-element』is generated not before the specified element, but as the first child inside the specified element.

<!-- Not here -->
<p>
<!-- The ':before pseudo-element' is generated around here. -->

</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1.5+ ○

Safari

4+ ○

3 and below ×

Edge

12+ ○

Supported in all versions

11 ○

10 ○

9 ○

8 △

7 ×

6 ×

Opera

7+ ○

6 △

5 △

4 △

↑ Supported as『:before』

3 and below ×

Mobile

iOS Safari

3+ ○

2 and below ×

Android Browser

4.4+ ○

3 and below ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version information is based on MDN.

If you find any errors or copyright issues, please contact us.

Home