- [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 before, that's going to put our pseudo-element
before all of the content in the h1.
Put in our brackets, split this open,
and the first property we need,
in order to make the pseudo-element take effect,
is the content property.
So I'll type content colon space,
two tick marks and a semicolon.
So we're adding an empty string here.
Next we'll add a display property.
We're going to set this to block.
Next line, we're going to set a height.
We're going to set the height to one pixel.
Next property's going to be border-top,
so border hyphen top, colon space.
We're going to set the size to one pixel.
We're going to set the style to solid.
And then for the color, we're going to use
a 60% transparent white,
so we'll type rgba, put in a parentheses and a semicolon.
For red, we'll put 255,
same for green, same for blue,
comma, then .6 for the alpha.
Next we'll set a width property of 100%.
And we need to set this property because on the next line,
we're going to set a position property of absolute.
Then after absolute, we're going to set a left property
of zero pixels, comma space.
And then we'll set a bottom property of .08 ems.
Now before we save our work,
since we are absolute positioning this pseudo-element
inside of the h1, let's come up here to the h1 element,
and let's add a position property here of relative.
This way the pseudo-element will position
in relation to the h1.
So with these in place, let's hit save.
We'll go back to the browser and hit reload.
We'll now see that we have a rule
that shows up underneath of the type,
because we're using a before element here.
And the bottom position puts the rule
up underneath the type.
Now the last thing I want to do is have the rule extend out
to the left and to the right of the type.
Right now it's conforming to the size of the main element.
So let's go back to our h1 tag.
Let's come in here and add a margin property.
So after position, we'll add margin, colon space,
and for the top and bottom property,
we're going to set this to zero, then a space.
Then for the right and left,
we're going to set this to negative 50 pixels.
So negative 50 px, then a semicolon.
Save your CSS, go back to the browser,
and we now have our heading rule
extending 50 pixels on both the left-hand side
and the right-hand side.
So using a pseudo-element, along with some position
and margin properties, we're able to add a design element
to our heading, without adding
any additional HTML to our page.
Now if you'd like to explore more options
for working with pseudo-elements,
we have one course called Graphics and CSS Pseudo-Elements,
and another course called Creating a Pull Quote with CSS,
where we add text content with pseudo-elements.
And both are available here in the library.
And so with that, I'll conclude this episode,
and as always, thanks for watching.