From the course: CSS Shorts

Unlock this course with a free trial

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

Flex a column with a pseudo-element

Flex a column with a pseudo-element - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Flex a column with a pseudo-element

“

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

Contents