Roots
Back
  

Expand All
Contract All

Pseudo-Elements

What are pseudo-elements?

Pseudo-elements are similar to pseudo-classes in that they add some kind of style, however they are applied to the given HTML element permanently, not only in certain conditions.

How to use pseudo-elements

You add pseudo-elements to a CSS file in much the same way as pseudo-classes;

valid-element:pseudo-element { property: value; }

valid-element - The name of a valid element to apply the pseudo-element to. Some pseudo-elements can only be applied to paragraphs of text.
pseudo-element - The pseudo-element name.

first-letter

This pseudo-element applies to the first letter in a paragraph.

p:first-letter { font-size: 12px; }

first-line

This pseudo-element applies to the first line of text in a paragraph.

p:first-line { font-weight: bold; }

before

This pseudo-element does not work in IE. It can be applied to any element, and will insert some specified content before the actual content in the element.

myClass:before { content: yourContent; }

yourContent - This can be text enclosed in quotes (") or a file;

myClass:before { content: "Inserted Text"; }
myClass:before { content: url(myImage.jpg); }

after

This pseudo-element does not work in IE. It can be applied to any element, and will insert some specified content after the actual content in the element.

myClass:after { content: "Inserted Text"; }

The kind of content which can be inserted is the same as for before.