How to draw dual bottom borders on a heading? - html

Question

How can I do something like the picture below?
I would like to have an extra thick line to all my h1's but am not quite sure of a best practice to do it.
HTML:
<h1>This is Our Work</h1>
CSS:
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
}
h1:after {
content: "";
display: block;
border: 1px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
}
Codepen:

Answer 1

You don't need any pseudo elements in this case.
You can draw multiple background images with css3 linear-gradient() with precisely controlled size and positions:
h1 {
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-repeat: no-repeat;
background-size: 100% 1px, 50px 3px;
background-position: bottom 2px left, bottom 1px center;
}
h1{
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-size: 100% 1px, 50px 3px;
background-repeat: no-repeat;
background-position: bottom 2px left, bottom 1px center;
position: relative;
display: inline-block;
}
<h1>This is Our Work</h1>

Answer 2

You need to add position:relative to the h1 and set margin:0 auto to h1:after
h1 {
border-bottom: 1px solid #0D6CC4;
display: inline-block;
position:relative;
}
h1:after {
content: "";
display: block;
border: 2px solid #0D6CC4;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left:0 ;
bottom:-2px;
margin:0 auto;
}
<h1>This is Our Work</h1>

Answer 3

Try this just with a few tweaks in styling related to position.
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
border: 2px solid black;
width: 50px;
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: -1.5px;
}
<h1>This is Our Work</h1>

Answer 4

used this css
h1:after {
content: "";
display: block;
border: 3px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
bottom: -3px;
}
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}

Answer 5

You need to position element :after and :before
.main-title{
text-align: center;
}
.inner-title{
position: relative;
font-size: 24px;
padding: 0 0 15px;
margin: 0 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
h1:before {
position: absolute;
content: '';
width: 150px;
left: 50%;
margin-left: -75px;
height: 1px;
background: blue;
bottom: 0;
}
h1:after {
position: absolute;
content: '';
width: 50px;
left: 50%;
margin-left: -25px;
height: 3px;
background: blue;
bottom: -1px;
}
<div class="main-title" >
<h1 class="inner-title">Sevices</h1>
</div>

Answer 6

Since you don't know how long every h1 tag will be, i suggest you to translate the element to the center of its parent, like in this example: http://codepen.io/anon/pen/jyMzqN
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
position: absolute;
height: 3px;
background-color: black;
width: 50px;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
}