Posts in current category

CSS pseudo-elements


May 03, 2021 23:00 CSS


Table of contents


CSS pseudo-element


CSS pseudo-elements are special effects used to add selectors.

CSS pseudo-elements control content and elements are no different, but they are only element-based abstractions and do not exist in the document, so they are called pseudo-elements.


Grammar

The syntax of a pseudo-element:

selector:pseudo-element {property:value;}

CSS classes can also use pseudo-elements:

selector.class:pseudo-element {property:value;}


:first-line pseudo-element

The "first-line" pseudo-element is used to style the first line of text.

In the following example, the browser formats the first line of text of the p-element based on the style in the "first-line" pseudo-element:

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Try it out . . .

Note: The "first-line" pseudo-element can only be used for block-level elements.

Note: The following properties can be applied to the "first-line" pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:first-letter pseudo-element

The "first-letter" pseudo-element is used to style the initials of the text:

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Try it out . . .

Note: The "first-letter" pseudo-element can only be used for block-level elements.

Note: The following properties can be applied to the "first-letter" pseudo-element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

Tip: For a description of first-letter pseudo-elements, you can refer to the CSS:first-letter pseudo-elements section of this site.


Pseudo-elements and CSS classes

Pseudo-elements can be combined with CSS classes:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>


Try it out . . .
Click the "Try it" button to view the online instance

The example above turns the first letter of all paragraphs with class article red.


Multiple Pseudo-elements

You can use it in combination with multiple pseudo-elements.

In the following example, the first letter of the paragraph appears in red with a font size of xx-large. The rest of the text in the first line will be blue and will be displayed in small capital letters.

The rest of the text in the paragraph is displayed in the default font size and color:

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Try it out . . .

CSS - :before pseudo-element

The ":before" pseudo-element inserts new content before the content of the element.

The following example inserts a picture in front of each of the elements:

h1:before
{
content:url(smiley.gif);
}

Try it out . . .

CSS - :after pseudo-element

The ":after" pseudo-element inserts new content after the content of the element.

The following example inserts a picture after each of the elements:

h1:after
{
content:url(smiley.gif);
}

Try it out . . .

All CSS pseudo-classes/elements

Selector Example Example description
:link a:link Select all unresoled links
:visited a:visited Select all the links you've visited
:active a:active Select the active link
:hover a:hover The status of the mouse on the link
:focus input:focus The element is selected to have focus after input
:first-letter p:first-letter Select the first letter of each element
:first-line p:first-line Select the first line of each element
:first-child p:first-child The selector matches the element of the first child element that belongs to any element
:before p:before Insert content before each element
:after p:after Insert the content after each element
:lang( language ) p:lang(it) Select a start value for the lang property of the element