How to Manipulate Content With CSS Pseudo-Elements

► Pseudo-elements insert phantom or fake elements into a document which allows us to achieve certain effects. They are added by attaching keywords to CSS selectors that we can then use to style specific parts of elements.

We can create generated content and insert it before, or after the content of an element, or use pseudo-elements to style certain parts of the content of elements. Like the first letter of a heading, or the first line of a paragraph.

Syntactically, pseudo-elements, look similar to pseudo-classes, but instead of using single-colons like :hover, pseudo-elements use a double-colon, like ::first-line, for example.

So in this video, we'll specifically look at

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

► Timestamps:
0:00 Start
1:04 Definition & syntax for pseudo-elements
2:10 Sandbox for the video + github repo & codepens
3:30 ::first-line
5:20 ::first-letter
5:49 Dropcaps
6:33 The initial letter CSS property
7:00 CSS properties that can be used with ::first-letter & ::first-line
8:11 Emoji menus on mac & windows
8:32 ::before
9:35 The content property
9:52 Generating content with CSS
10:24 Where content generated with ::before and ::after appears in the HTML document
10:48 Adding generated text content
11:18 ::after
12:16 Adding content from a url
13:10 ::placeholder
13:57 Summary of all of the types of selectors we’ve covered
15:38 Brief word on specificity in CSS

► Get the code:

► Links used in the video:
Lightning emojis used in video: ⚡

► Other types of CSS Selectors:

► Social Media:

► Code & Projects:

[clinthoon]

I'm so glad I found you! I've watched all your CSS videos and you cleared up things that I've been struggling with for weeks!

[veerratliff]

You're way better then Kevin Powell at breaking CSS down. Hope your channel gets as big. If you did some js then a lot more people would come to this channel

[simonbielik]

Time to thank you again for another amazing video 🙇‍♂

[lilahbautista]

Thank you so much for this really useful tutorial. They are all so good

[janelleschuh]

lol you explained it better than my paid udemy course. thanks.