This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Generated Content to Augment Information

    Greg ThomanGreg Thoman

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 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.

    00:16 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.

    Discuss

    Discuss