AtoZ CSS Screencast: CSS Pseudo Elements

Pseudo elements are elements on the page that aren’t found in the HTML code.

They can be manipulated with any CSS that would be applied to any other element.

Two special pseudo elements - :before and :after can be used to generate content on the page from CSS and have many potential use cases.

In this episode we’ll learn about:

• The five different pseudo elements
• Generating content like text, images attribute values and counters from CSS
• And how to make complex shapes with minimal markup

Pseudo Elements

There are five pseudo elements in CSS:

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

These are differentiated from pseudo classes with the double colon but are often written in CSS with a single colon for brevity.

I’ve got a long blockquote of placeholder text here. I can change the color of the first line of text with :first-line which even holds true when the text reflows. I can create a drop cap by styling the :first-letter with float and a larger font-size. And I can change the color of selected text with :selection.

Continue reading %AtoZ CSS Screencast: CSS Pseudo Elements%

by Guy Routledge via SitePoint