Pseudo-Elements

A pseudo-element creates an element that was not there before.

The pseudo-elements include

• ::before
• ::after
• ::first-letter
• ::first-line

In practice this allows the designer to add some interesting effects. For example, consider the following example.

p::first-letter {font-size: 2em; font-weight: 400;}

This will apply formatting to the first letter of every paragraph.

The pseudo-elements can also be used to add content to the page. The following CSS will add the characters within the quotation marks to the end of every paragraph.

p::after {
    content: "  --Dr. Foltz" ;
}

By combining the ::after pseudo-element with an attribute selector, the designer can automatically add the file type to any hyperlinked document. The following snippet applies only to .pdf files.

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: red;
}