Explore the powerful CSS content property and its applications in this comprehensive 25-minute video tutorial. Dive into various use cases for the before and after pseudo-elements, including simple text insertion, image backgrounds, and opening/closing quotes. Learn how to create markup-less tooltips with hover effects and animations. Discover text decoration techniques using Font Awesome icons. Master CSS counters and their versatile applications, such as creating numbered circles and customizing ordered lists. Gain practical insights into flexbox alignment, border-radius manipulation, and color customization. Follow along with provided timestamps and a CodePen example to enhance your CSS skills and create more dynamic, efficient web designs.
Overview
Syllabus
introduction
use case: simple text befor/after
use case: insert images e.g. background
use case: opening/close quotes
use case: tooltip without a markup
tooltip: add hover effect + animation
tooltip: animation origin
tooltip reminder: attr
use case: text decorations
use cases: text decoration: font awesome
use cases: counters
use cases: counters: adding text space, braces, etc
use cases: counters: put in a circle
use cases: counters: put in a circle: align using flex
use cases: counters: put in a circle: border-radius
use cases: counters: put in a circle: border
use cases: counters: put in a circle: border-box
use cases: counters: put in a circle: color
use cases: counters: ol
use cases: counters: ol: turn off list style
use cases: counters: ol: couter-reset
Taught by
Kevin Powell
