Pseudo-elements ::before and ::after.

::before
::after

Summary of characteristics of the ::before selector

Quick description
A pseudo-element designating the location immediately before an element.
Status
Standard
W3C Module
CSS Pseudo-Elements Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: REC (Recommendation)

Description of pseudo-elements ::before and ::after.

Very different from the other selectors, the ::before and ::after pseudo-elements are able to add an item before or after the targeted item. The contents of this added element are defined by the content property.

The example below adds an element containing the text "-->" to paragraphs in the note class. The added element is of type inline: no line breaks are added, either before or after the element.

p.note::before {content:'--> ';}

This first paragraph is not associated with any class.

This second paragraph has the class="note" attribute.

 

The content property is therefore required to define the content of the added element, but all other properties can be used to format this new item. Animations or transitions can also be applied, although browser compatibility is less good in this respect.

This is the item with the description description2. It consists of 2 paragraphs.

Second paragraph.

 

Be careful! The ::before and ::after pseudo-elements are only operational if they are applied to an element likely to contain others. They therefore have no effect on a number of tags such as img, br, input, textarea, etc. ::before and ::after are also ineffective if applied to select because this tag only accepts option elements.

Note: Text in elements added with the ::before pseudo-element are taken into account by other pseudo-elements ::first-letter and ::first-line.

 

We can see that the content property is inseparable from the pseudo-elements ::before and ::after. We recommend that you also check the content property page to find out what can be inserted before or after an element: the value of a counter, an image, consecutive points, etc.

Examples of how to use ::before and ::after.

Add a finial after each paragraph.

Elements inserted by ::before or ::after are by default of the inline type, but it is quite possible to redefine them as a block so that they are preceded and followed by a line break. This is what was done in the example below, to add a floret (a decoration) after each paragraph.

Quisque at dolor nec lorem pellentesque congue id id diam. Vestibulum efficitur suscipit elit et tincidunt. In pharetra malesuada neque a egestas. Nullam id tortor leo. Proin vitae placerat tellus. Duis ultrices dolor at nisi vulputate, non tincidunt metus dictum.

Suspendisse potenti. Aliquam sit amet elit nec sem hendrerit volutpat. Curabitur rhoncus nisi pharetra lorem vehicula, ut consectetur turpis facilisis. Ut pulvinar lobortis dui in consequat. Morbi suscipit rhoncus elit at pharetra.

Donec sed varius mi. Morbi imperdiet elit in scelerisque tincidunt. Donec aliquam erat aliquam sem auctor consequat. Curabitur aliquam sem odio, tincidunt commodo tellus mollis id. Aliquam hendrerit mattis risus, sit amet bibendum mi porttitor vel.

Browser compatibility.

Support for the ::before and ::after pseudo-elements is no problem with current browsers, including when it comes to applying animations or transitions to these pseudo-elements.

Column 1
Browser support for the pseudo-elements ::before and ::after used to insert content and style it before or after the element.
Column 2
Browser support for animations or transitions on the pseudo-elements ::before and ::after.
1
::before
::after
selectors
2
Animations and transitions on
::before and ::after
 
Estimated overall support.
97%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Firefox

Opéra

Samsung Internet

Baidu Browser

QQ Browser

UC Browser pour Androïd

Edge

Safari sur IOS

Androïd Brower

Safari

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Pseudo-elements ::before and ::after history.

Others pseudo-elements.

Selectors:

::after
A pseudo-element designating the location immediately after an element.
::details-content
Langue française
This pseudo-element targets the detailed content of a details tag.
::file-selector-button
Targets the button in an input box of type file. This button has a different appearance in each browser.
::first-letter
A pseudo-element targeting the first letter of the paragraph.
::first-line
A pseudo-element targeting the first line of the paragraph.
⚠
::grammar-error
Peudo-elements targeting texts with spelling mistakes (::spelling-error) or grammar errors (::grammar-error).
::highlight()
Langue française
Pseudo-element that targets the text selected after a search in the browser.
✗
::inactive-selection
Langue française
Targets the selected element or text when the window it is on is not active.
::marker
Langue française
A pseudo-element designating the marker in a list (bullet or number).
::placeholder
A pseudo-element designating the placeholder text in an input box (placeholder attribute).
⚠
::prefix
Target the punctuation characters that can precede the first letter of an element. Allows for a different styling of the first letter and the characters that come before it.
⚠
::search-text
Langue française
Target the text searched by the internet user (browser search zone CTRL+F).
::selection
Langue française
A pseudo-element that targets user-selected content.
::spelling-error
A pseudo-element that targets words or text with orthograph misspellings.
⚠
::suffix
Target the punctuation characters that may follow the first letter of an element. Allows for different styling of the first letter and the punctuation characters that follow it.
::target-text
Langue française
Targets the text of the item designated by the url bookmark.