CSS Pseudo Elements

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Pseudo Elements

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

Syntax
Note: ::selection always starts with double colons (::).

CSS pseudo-elements

::after

It will add the "website" as a text to the end of a paragraph

Try It Now

::before

It will add the "My favorite website is" as a text before the paragraph

Try It Now

::first-letter

It will add the "My favorite website is" as a text before the paragraph

Try It Now

::first-line Try It Now

Browser compatibility
Feature
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)


All CSS pseudo elements

Selector Example description Try It
::after p:after It inserts content after every <p>element. Try It
::before p:before It inserts content before every <p>element. Try It
::first-letter p::first-letter It selects the first letter of every <p> element. Try It
::first-line p::first-line It selects the first line of every <p> element Try It


CSS Pseudo Classes



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM