Horizontal line decoration with CSS

  1. Full code
  2. Single line decoration
    1. HTML code
    2. CSS code
  3. Single line dashed decoration
    1. CSS code
  4. Double line decoration
    1. CSS code

My goal is to have headers text (h1, h2, etc.) decorated with horizontal lines in various fashion (single line, dashed, double, etc.).

Full code

Single line decoration

Intended result:

Horizontal line decoration example

HTML code

1
2
3
4
5
<div>
<h2>
<span>H2 text</span>
</h2>
</div>

For the CSS code to work I need a tag inside the header tag, it can be a <span> (as above) or anything else. In the example above the div tag simulates the text container.

CSS code

1
2
3
4
5
div{
max-width: 300px;
margin: auto;
overflow: hidden;
}

The critical bit of code above is overflow: hidden: it hides the part of the horizontal lines that exceed the div max width.

1
2
3
4
5
6
7
8
9
10
11
12
h2 span{
display: inline-block;
position: relative;
}

h2 span::before, h2 span::after {
content: "";
position: absolute;
border-bottom: 1px solid black;
top: 50%;
width: 600px;
}

These rules are shared by both pseudo elements. top: 50% will ensure that the horizontal line stays vertically centered. The width value could be anything greater than the text-container width.

1
2
3
4
5
6
7
8
9
h2 span::before{
right: 100%;
margin-right: 15px;
}

h2 span::after{
left: 100%;
margin-left: 15px;
}

At last I need some rules for the left and right pseudo-elements. I’m going to use ::before for the left one and ::after for the right.

Single line dashed decoration

Intended result:

Horizontal line decoration example

The dashed version differs from the single line for a single line of code in the combined CSS rule for the pseudo-elements:

CSS code

1
2
3
4
5
6
7
h2 span::before, h2 span::after {
content: "";
position: absolute;
/*changed*/ border-bottom: 1px dashed black; /* was: 1px solid black */
top: 50%;
width: 600px;
}

Double line decoration

Intended result:

Horizontal line decoration example

The double line version requires a coulpe of edits in the CSS code:

CSS code

1
2
3
4
5
6
7
8
9
.article-header h2 a:before,.article-header h2 a:after {
content: "";
position: absolute;
/*NEW code*/height: 5px;
border-bottom: 1px solid black;
/*NEW code*/ border-top: 1px solid black;
top: 50%;
width: 600px;
}

I’m going to use the border-top property to draw the second line. The rule will be the same as the border-bottom one.

I also need to specify an height for the pseudo elements, so that the two lines will not be printed one over the other. If no height is specified the browser assumes it’s zero, so the bottom and top border (which we are using to draw the lines) coincide.

The greater the height, the greater the distance between the two lines will be.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="single-line">
<h2>
<span>Single line</span>
</h2>
</div>

<div class="dashed-line">
<h2>
<span>Dashed line</span>
</h2>
</div>

<div class="double-line">
<h2>
<span>Double line</span>
</h2>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
div{
max-width: 300px;
margin: auto;
overflow: hidden;
}

/**SINGLE LINE**/

div.single-line h2{
text-align: center;
}

div.single-line h2 span{
display: inline-block;
position: relative;
}

div.single-line h2 span::before, div.single-line h2 span::after {
content: "";
position: absolute;
border-bottom: 1px solid black;
top: 50%;
width: 600px;
}

div.single-line h2 span::before{
right: 100%;
margin-right: 15px;
}

div.single-line h2 span::after{
left: 100%;
margin-left: 15px;
}
/** DASHED LINE **/

div.dashed-line h2{
text-align: center;
}

div.dashed-line h2 span{
display: inline-block;
position: relative;
}

div.dashed-line h2 span::before, div.dashed-line h2 span::after {
content: "";
position: absolute;
height: 100%;
border-bottom: 1px dashed black;
top: -50%;
width: 600px;
}

div.dashed-line h2 span::before{
right: 100%;
margin-right: 15px;
}

div.dashed-line h2 span::after{
left: 100%;
margin-left: 15px;
}

/** DOUBLE LINE **/

div.double-line h2{
text-align: center;
}

div.double-line h2 span{
display: inline-block;
position: relative;
}

div.double-line h2 span::before, div.double-line h2 span::after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
border-top: 1px solid black;
top: calc(50% - 2.5px);
width: 600px;
}

div.double-line h2 span::before{
right: 100%;
margin-right: 15px;
}

div.double-line h2 span::after{
left: 100%;
margin-left: 15px;
}
dark