From the course: CSS Shorts

Unlock this course with a free trial

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

Overlapping heading rule

Overlapping heading rule - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Overlapping heading rule

“

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll use CSS to add a rule to a heading that allows for overlapping text without adding any additional HTML to our page. So if you'd like to follow along, download the exercise files, and let's begin by opening the HTML file in a text editor. Once you have the HTML file open, up in the head area, you'll see we have a link to style that CSS, which we'll be opening in a minute. Inside of the body area, there's all of our page content. It's this h1 tag here inside of the main element where we're going to be adding our rule. And if you open this HTML file in a browser, you'll see the layout we're starting with. So at this point, let's go back to our exercise files. Let's find style.css. Let's open this in our text editor. Then with the CSS file open, let's scroll down to the bottom. After the h1 rule, we're going to add another rule that's going to add a pseudo-element into that h1. So start by typing h1, two colons, then…

Contents