Want to know how to add a graphic column to a webpage without adding any markup to the HTML file? Explore a technique to show you how to use a CSS pseudo-element and some CSS flex properties. By adding these elements and properties, you can alter your layout without adding to your HTML. Super efficient!
- [Instructor] Hi, this is Chris Converse and in this episode we'll add a graphic column to a web page using a CSS pseudo-element and some CSS flex properties, allowing us to alter the layout without adding any markup to the HTML file. So if you'd like to follow along with me, download the exercise files and let's begin by opening the HTML file in a text editor. So when you have the HTML file open, up in the head area we have a link to a style.css file which we'll be opening in a moment. Inside of the body area, we have a main element. This main element is going to serve as our main flex container and the first element in here, the article, will be the first column.
Now the second column, which will contain just a graphic, we're going to be adding through a CSS pseudo-element. So I don't want to add any additional markup to the HTML to add that design element. So let's go back to the exercise files. Let's find style.css. Let's open that in our text editor. Once that's open, let's scroll down. We're looking for the main rule here, and after the height property, let's come in here and set another property. Let's set a display, and let's set this to flex.
Next, let's get the cursor down inside of the main space article rule. After the padding property, let's come in here and add a flex property. So type flex colon space. We'll use shorthand style here, so we'll use one for the flex grow, space one for the shrink, then a space and then 65% for the basis, then a semicolon. Now in order to have our flex column show up, we're going to need a second element inside of the main element, and this is where we're going to add that extra element with a pseudo-element. So let's get our cursor before the main space article.
Let's create another rule, main, two colons, then the word before, that will add our element. Inside of here, let's start with a content property. We're going to set this equal to two single tick marks and a semicolon. Next let's set a display property to block. Next property, let's set a flex property on this new pseudo-element. So flex colon space.
We'll do one space one space and then 35%. Next property, let's set a background. Let's skip the color and go right to url so we can bring in a background image. So url, beginning and ending parentheses, type images, forward slash, background.jpg. Then outside of the parentheses, we're going to set a no-repeat property. We're going to set the x position to 30% and the y position to zero.
Then on the next line, let's set a background-size, and we're going to set this to cover, then a semicolon. So with those rules in place, hit save. Go back to the browser and you'll now see that we have a new element being added that's being treated like a flex column although the entire element is being added through a pseudo-element in our CSS. So without adding any additional HTML to our page, we're able to add in another design element using CSS pseudo-elements and the flex properties. And so with that, I'll conclude this episode, and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.