Line under text effect in CSS
I am trying to achieve something similar in CSS:
The text should be centered in a container that has a background padding 5px 20px
and a "line" side padding ... 20px
I'm trying to achieve this with :: before and :: after elements, but I don't really need the result, see below code ...
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>
+3
source to share
4 answers
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 line and place it 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>
+2
source to share
You can add :before
and :after
withposition: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>
+6
source to share
You can just use the 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>
0
source to share
Use relative position by title 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>
0
source to share