1
00:00:02.02 --> 00:00:03.04
- [Instructor] Hi, this is Chris Converse,

2
00:00:03.04 --> 00:00:05.00
and in this episode, we'll use CSS

3
00:00:05.00 --> 00:00:06.07
to add a rule to a heading

4
00:00:06.07 --> 00:00:08.02
that allows for overlapping text

5
00:00:08.02 --> 00:00:11.03
without adding any
additional HTML to our page.

6
00:00:11.03 --> 00:00:12.07
So if you'd like to follow along,

7
00:00:12.07 --> 00:00:14.01
download the exercise files,

8
00:00:14.01 --> 00:00:17.09
and let's begin by opening the
HTML file in a text editor.

9
00:00:17.09 --> 00:00:19.05
Once you have the HTML file open,

10
00:00:19.05 --> 00:00:21.03
up in the head area,
you'll see we have a link

11
00:00:21.03 --> 00:00:24.08
to style that CSS, which
we'll be opening in a minute.

12
00:00:24.08 --> 00:00:28.03
Inside of the body area,
there's all of our page content.

13
00:00:28.03 --> 00:00:31.01
It's this h1 tag here
inside of the main element

14
00:00:31.01 --> 00:00:33.05
where we're going to be adding our rule.

15
00:00:33.05 --> 00:00:35.05
And if you open this
HTML file in a browser,

16
00:00:35.05 --> 00:00:37.08
you'll see the layout we're starting with.

17
00:00:37.08 --> 00:00:39.08
So at this point, let's go
back to our exercise files.

18
00:00:39.08 --> 00:00:42.05
Let's find style.css.

19
00:00:42.05 --> 00:00:44.09
Let's open this in our text editor.

20
00:00:44.09 --> 00:00:46.04
Then with the CSS file open,

21
00:00:46.04 --> 00:00:47.09
let's scroll down to the bottom.

22
00:00:47.09 --> 00:00:50.05
After the h1 rule, we're
going to add another rule

23
00:00:50.05 --> 00:00:54.07
that's going to add a
pseudo-element into that h1.

24
00:00:54.07 --> 00:00:59.01
So start by typing h1, two colons,

25
00:00:59.01 --> 00:01:01.04
then before, that's going
to put our pseudo-element

26
00:01:01.04 --> 00:01:04.02
before all of the content in the h1.

27
00:01:04.02 --> 00:01:07.00
Put in our brackets, split this open,

28
00:01:07.00 --> 00:01:08.02
and the first property we need,

29
00:01:08.02 --> 00:01:09.08
in order to make the
pseudo-element take effect,

30
00:01:09.08 --> 00:01:12.00
is the content property.

31
00:01:12.00 --> 00:01:14.09
So I'll type content colon space,

32
00:01:14.09 --> 00:01:16.08
two tick marks and a semicolon.

33
00:01:16.08 --> 00:01:21.01
So we're adding an empty string here.

34
00:01:21.01 --> 00:01:23.02
Next we'll add a display property.

35
00:01:23.02 --> 00:01:26.01
We're going to set this to block.

36
00:01:26.01 --> 00:01:28.02
Next line, we're going to set a height.

37
00:01:28.02 --> 00:01:32.02
We're going to set the
height to one pixel.

38
00:01:32.02 --> 00:01:34.08
Next property's going to be border-top,

39
00:01:34.08 --> 00:01:39.05
so border hyphen top, colon space.

40
00:01:39.05 --> 00:01:42.01
We're going to set the size to one pixel.

41
00:01:42.01 --> 00:01:44.08
We're going to set the style to solid.

42
00:01:44.08 --> 00:01:46.02
And then for the color, we're going to use

43
00:01:46.02 --> 00:01:49.01
a 60% transparent white,

44
00:01:49.01 --> 00:01:53.06
so we'll type rgba, put in a
parentheses and a semicolon.

45
00:01:53.06 --> 00:01:55.05
For red, we'll put 255,

46
00:01:55.05 --> 00:01:58.02
same for green, same for blue,

47
00:01:58.02 --> 00:02:02.01
comma, then .6 for the alpha.

48
00:02:02.01 --> 00:02:06.05
Next we'll set a width property of 100%.

49
00:02:06.05 --> 00:02:08.04
And we need to set this property
because on the next line,

50
00:02:08.04 --> 00:02:13.05
we're going to set a position
property of absolute.

51
00:02:13.05 --> 00:02:16.08
Then after absolute, we're
going to set a left property

52
00:02:16.08 --> 00:02:20.01
of zero pixels, comma space.

53
00:02:20.01 --> 00:02:27.06
And then we'll set a
bottom property of .08 ems.

54
00:02:27.06 --> 00:02:28.09
Now before we save our work,

55
00:02:28.09 --> 00:02:31.07
since we are absolute
positioning this pseudo-element

56
00:02:31.07 --> 00:02:34.09
inside of the h1, let's come
up here to the h1 element,

57
00:02:34.09 --> 00:02:38.04
and let's add a position
property here of relative.

58
00:02:38.04 --> 00:02:40.00
This way the pseudo-element will position

59
00:02:40.00 --> 00:02:42.03
in relation to the h1.

60
00:02:42.03 --> 00:02:44.01
So with these in place, let's hit save.

61
00:02:44.01 --> 00:02:45.09
We'll go back to the
browser and hit reload.

62
00:02:45.09 --> 00:02:47.03
We'll now see that we have a rule

63
00:02:47.03 --> 00:02:49.03
that shows up underneath of the type,

64
00:02:49.03 --> 00:02:52.01
because we're using a before element here.

65
00:02:52.01 --> 00:02:53.06
And the bottom position puts the rule

66
00:02:53.06 --> 00:02:55.01
up underneath the type.

67
00:02:55.01 --> 00:02:57.03
Now the last thing I want to
do is have the rule extend out

68
00:02:57.03 --> 00:02:59.09
to the left and to the right of the type.

69
00:02:59.09 --> 00:03:04.06
Right now it's conforming to
the size of the main element.

70
00:03:04.06 --> 00:03:07.08
So let's go back to our h1 tag.

71
00:03:07.08 --> 00:03:09.08
Let's come in here and
add a margin property.

72
00:03:09.08 --> 00:03:14.06
So after position, we'll
add margin, colon space,

73
00:03:14.06 --> 00:03:15.08
and for the top and bottom property,

74
00:03:15.08 --> 00:03:18.06
we're going to set this
to zero, then a space.

75
00:03:18.06 --> 00:03:20.02
Then for the right and left,

76
00:03:20.02 --> 00:03:23.00
we're going to set this
to negative 50 pixels.

77
00:03:23.00 --> 00:03:26.06
So negative 50 px, then a semicolon.

78
00:03:26.06 --> 00:03:29.02
Save your CSS, go back to the browser,

79
00:03:29.02 --> 00:03:30.05
and we now have our heading rule

80
00:03:30.05 --> 00:03:33.03
extending 50 pixels on
both the left-hand side

81
00:03:33.03 --> 00:03:35.08
and the right-hand side.

82
00:03:35.08 --> 00:03:37.08
So using a pseudo-element,
along with some position

83
00:03:37.08 --> 00:03:40.02
and margin properties, we're
able to add a design element

84
00:03:40.02 --> 00:03:41.06
to our heading, without adding

85
00:03:41.06 --> 00:03:43.09
any additional HTML to our page.

86
00:03:43.09 --> 00:03:45.05
Now if you'd like to explore more options

87
00:03:45.05 --> 00:03:47.00
for working with pseudo-elements,

88
00:03:47.00 --> 00:03:50.02
we have one course called
Graphics and CSS Pseudo-Elements,

89
00:03:50.02 --> 00:03:53.04
and another course called
Creating a Pull Quote with CSS,

90
00:03:53.04 --> 00:03:56.01
where we add text content
with pseudo-elements.

91
00:03:56.01 --> 00:03:58.04
And both are available
here in the library.

92
00:03:58.04 --> 00:04:00.06
And so with that, I'll
conclude this episode,

93
00:04:00.06 --> 00:04:03.05
and as always, thanks for watching.