From the course: CSS Shorts

Unlock this course with a free trial

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

Add images with pseudo-elements

Add images with pseudo-elements - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Add images with pseudo-elements

“

- [Narrator] Hi, I'm Chris Convers, and in this episode, we'll add images to our webpage using pseudo-elements, allowing us to add extra graphical content to our page without adding image elements to our HTML. So if you'd like to follow along, download the exercise files, and we'll begin by opening the HTML file in a text editor. And so once you have the HTML file open, up in the head area, you'll see we have a link to style.css. We'll be opening this in a moment, and then inside of the body area, we have a gallery. The gallery's inside of an article element with a class of gallery. And then each item is an image inside of a div container. And now the information that we need to add to the HTML is going to be for which items get which graphics. And I want to do this with a data attribute instead of a class since this is content related. So for the first div element, let's come in here and let's add a space before the greater than sign. Then let's type data-status equals two quotes and…

Contents