Bugl — Daily coding puzzles and drills

Pseudo-elements for Content

Formula

Pseudo - elements for content allow you to insert content before or after elements, style list markers, and more.

The CSS ::before Pseudo-element

The

Formula

::before pseudo - element is used to insert some content before the content of a specified element.

Use the content property to specify the content to insert.

Example

Formula

Insert an image before the content of each < h3 > element:

h3::before

{
content: url(smiley.gif);
}

The CSS ::after Pseudo-element

The

Formula

::after pseudo - element is used to insert some content after the content of a specified element.

Use the content property to specify the content to insert.

Example

Formula

Insert an image after the content of each < h3 > element:

h3::after

{
content: url(smiley.gif);
}

The CSS ::marker Pseudo-element

The

Formula

::marker pseudo - element is used to style the list item markers.

Example

Style the markers of list items:

::marker {
color: red;
font-size: 23px;
}

The CSS ::selection Pseudo-element

The

Formula

::selection pseudo - element is used to style the part of a text that is selected by a user.

Example

Formula

Style the user - selected text with a red color, and a yellow background:

::selection {
color: red;
background: yellow;
}

The CSS ::backdrop Pseudo-element

The

Formula

::backdrop pseudo - element is used to style the viewbox behind a dialog box or popover element.

Example

Style the viewbox behind a dialog box:

dialog::backdrop {
background-color: lightgreen;
}

CSS Pseudo-elements Reference

Formula

For a complete list of all CSS Pseudo - elements, visit our
CSS Pseudo - elements Reference.

CSS Pseudo-elements for Content

CSS Pseudo-elements for Content

Pseudo-elements for Content

The CSS ::before Pseudo-element

The

Example

The CSS ::after Pseudo-element

The

Example

The CSS ::marker Pseudo-element

The

Example

The CSS ::selection Pseudo-element

The

Example

The CSS ::backdrop Pseudo-element

The

Example

CSS Pseudo-elements Reference

CSS Pseudo-elements for Content

CSS Pseudo-elements for Content

Pseudo-elements for Content

The CSS ::before Pseudo-element

The

Example

The CSS ::after Pseudo-element

The

Example

The CSS ::marker Pseudo-element

The

Example

The CSS ::selection Pseudo-element

The

Example

The CSS ::backdrop Pseudo-element

The

Example

CSS Pseudo-elements Reference