Join James Williamson for an in-depth discussion in this video Generated content, part of CSS: Selectors.
- View Offline
- Exercise Files
- One of the more interesting capabilities of CSS…is generated content.…That is, using the pseudo element selectors…before and after to inject content directly…before or after the existing content of an element.…Now since this content exists outside the DOM,…it's typically used for decorative or non-essential uses.…Now before we experiment with this,…I'm gonna take a look at the syntax.…I'm gonna scroll down into this generated.htm file.…You can see both of the examples here before and after…used the pseudo element selector syntax…of the two colons instead of just the one.…
Although as we discussed before,…older browsers supported the single colon syntax…so there's no harm in doing it that way…and most people are still doing it that way.…Okay now in this case in the syntax…when you use either the pseudo element selector…of before or after, you're also going to use…a property value that is distinct to it,…and that is the content property value.…Now content is gonna be what it is…that you're injecting either before or after…
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
HTML5: Graphics and Animation with Canvaswith Joe Marini3h 7m Intermediate
1. Basic Selectors
2. Attribute Selectors
3. User Action Pseudo-Class Selectors
4. Structural Selectors
6. Matching Patterns
7. Writing Efficient Selectors
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.