- [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.