From the course: Design the Web: Graphics and CSS Pseudo-Elements

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Creating a pseudo-element with CSS

Creating a pseudo-element with CSS

Now in this HTML five document, I've combined the style sheet inside of the HTML, so in the heading area here, we can see our beginning and ending style tags, with some basic styles in place, to give us a common starting point. And then inside of the body area, we have a div container with a class of page, and then three individual elements. Now throughout this course, we are not going to change any of the content inside of the body area. But we are going to make some significant changes, to the way the content looks, by injecting pseudo-elements and graphics, with C.S.S.. So before we get started, I'd like to illustrate exactly what we're going to be doing with C.S.S.. Now the first rule that we're going to create, is going to be dot page and then a space. Then we're going to target the h1 tag, which is our header. Then a colon, and then the word after. This is going to be the first pseudo-element, that we're going to create. Now the first property inside of this pseudo-element, is…

Contents