From the course: CSS: Selectors

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter

Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter - CSS Tutorial

From the course: CSS: Selectors

Start my 1-month free trial

Meet the pseudo-elements ::before, ::after, ::first-line, ::first-letter

- [Instructor] Pseudo-elements look like pseudo-classes but they're much lower in specificity, more like an HTML element selector. They change a part of a selected element but not the whole element as most selectors do. Some pseudo-elements are written in two forms of syntax and specifically the four I cover here are affected by this. There are pseudo-elements that were introduced in CSS two where they were written with a single colon so they look like pseudo-classes. But in CSS three they changed the pseudo-element syntax to two colons so you don't have to remember whether a pseudo-element supports one or two colons. Just be safe and write 'em all with two colons going forward. There are several pseudo-elements available to you but I'm going to focus on the four with the best support and that are probably the most used. And so the first one I want to talk about is the first letter construct. And so first letter will take the first letter, say of this paragraph, and style it in some…

Contents