Slide 5.24: CSS pseudo-element

CSS Pseudo-Element

CSS pseudo-element is used to add special effects to some selectors.

Syntax
The syntax of pseudo-element is on the right:

 selector:pseudo-element {
  property: value }

CSS classes can also be used with pseudo-element:

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

The :first-line Pseudo-Element
The first-line pseudo-element is used to add special styles to the first line of the text in a selector:


<html> <head> <style type="text/css"> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body bgcolor="#EDF3FE"> <p>You can use the :first-line pseudo-element to add a special effect to the first line of a text.</p> </body> </html>

Where the browser breaks the line depends on the size of the browser window. The first-line pseudo-element can only be used with block-level elements. 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

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } </style> </head> <body bgcolor="#EDF3FE"> <p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text! </p> </body> </html>