Line below the text effect in CSS - css

Question

I try to achieve something like this in CSS:
The text should be centered in the container, having a background padding 5px 20px and a "line" lateral padding of 20px...
I try do achieve it with the ::before and ::after elements, but the output is not really like I need, see the code bellow...
Codepen: https://codepen.io/serhio/pen/XRYgxo?editors=1100
header {
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 20px;
}
header::before {
width: 20px;
height: 2px;
background: blue;
display: inline-block;
content: '';
}
header::after {
width: 20px;
height: 2px;
background: red;
display: inline-block;
content: '';
}
<header>Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>
<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

Answer 1

You can add :before & :after using position:absolute
header {
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 20px;
position:relative;
margin:0 20px
}
header::before {
width: 20px;
height: 2px;
background: blue;
display: inline-block;
content: '';
position: absolute;
left: -20px;
top: 50%;
transform:translateY(-50%);
}
header::after {
width: 20px;
height: 2px;
background: red;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top: 50%;
transform:translateY(-50%);
}
<header>Quisque tincidunt<br/> Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>
<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

Answer 2

You can try something like this with position: absolute
header {
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 20px;
position: relative;
margin: 0 20px;
border: 2px solid blue;
}
header::before,
header::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: blue;
display: block;
content: '';
}
header::before {
left: -20px;
}
header::after {
right: -20px;
}
<header>Quisque tincidunt</header>
Or create one single line and place it smartly like this :
header {
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 20px;
position: relative;
margin: 0 20px;
border: 2px solid blue;
}
header::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 40px);
height: 2px;
display: block;
background: blue;
z-index: -1;
}
<header>Quisque tincidunt</header>

Answer 3

You can use simply pseudo class :after :before
header {
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 20px;
position: relative;
margin: 0 30px 20px;
}
header::before {
width: 20px;
height: 2px;
background: blue;
position: absolute;
top: 50%;
margin-top: -1px;
content: '';
right: 100%;
}
header::after {
width: 20px;
height: 2px;
margin-top: -1px;
background: red;
position: absolute;
top: 50%;
content: '';
left: 100%;
}
<header>Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>
<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

Answer 4

Utilize position relative on header and position absolute on ::before and ::after content, run code snippet to see how it works
header {
position: relative;
font-weight: bold;
background: lightblue;
text-align: center;
border-radius: 5px;
display: inline-block;
padding: 5px 40px;
}
header::before {
content: '';
position: absolute;
top: 50%;
left: 20px;
width: 20px;
height: 2px;
margin-top: -1px;
background: blue;
}
header::after {
content: '';
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 2px;
margin-top: -1px;
background: red;
}
<header>Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>
<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>