Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Use Generated Content to Augment Information

0:43 CSS lesson by

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

Here's a list of dinosaurs. Let's make it show additional information on mouseover. We'll add data attributes for length and height. To display our new information, let's add a psuedo-element that shows on hover. In the content attribute, we have access to the attributes of the parent.

Now, we do have access to attributes like class, id and href, but we're going to use the data length and data width that we created earlier. Now that we're showing that information in the view, let's go ahead and make it look better.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?