CSS Pseudo Elements

The :first-line Pseudo-element

The “first-line” pseudo-element is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the “first-line” pseudo-element (where the browser breaks the line, depends on the size of the browser window):

Example

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

Note: The following properties apply 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

CSS – The :before Pseudo-element

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

CSS – The :after Pseudo-element

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

You may also like...