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
and here is the link to where we looked at the ::placeholder pseudo-element in the last video: • How to Use CSS Pseudo-Classes
► 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:
Repo: https://github.com/craigabourne/css-p...
CodePen Start: https://codepen.io/craigabourne/pen/J...
CodePen End: https://codepen.io/craigabourne/pen/M...
► Links used in the video:
MDN Pseudo-elements: https://developer.mozilla.org/en-US/d...
::first-line: https://developer.mozilla.org/en-US/d...
::first-letter: https://developer.mozilla.org/en-US/d...
::before: https://developer.mozilla.org/en-US/d...
::after: https://developer.mozilla.org/en-US/d...
Drop Cap example: https://www.telegraph.co.uk/football/...
Initial letter styling: https://www.w3.org/TR/css-inline/#ini...
Caniuse: https://caniuse.com/#feat=css-initial...
Lightning emojis used in video: ⚡
Nike logo: https://bit.ly/2uZTSB8
► Other types of CSS Selectors:
Element, Class, & ID Selectors: • CSS Selector Basics - Element, Class,...
Child & Descendant Selectors: • CSS Child and Descendant Selectors
Sibling Selectors: • Adjacent and General Sibling Selector...
Universal & Attribute Selectors: • Universal and Attribute Selectors in CSS
Pseudo-classes: • How to Use CSS Pseudo-Classes
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Смотрите видео How to Manipulate Content With CSS Pseudo-Elements онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 01 Июль 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,329 раз и оно понравилось 94 людям.