Archived topic
Customizing H1 with underline
3 replies · Started by Alexander on November 9, 2021
Viewing posts 1–4 of 4
I'd like to underline H1 headline in a way like this:
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 10px;
position: relative;}
h1:before{
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid #c4c7a0;}
Could you please help to correct the code so the headline doesn't move to the left side?
Hi there,
try this CSS instead:
header.gb-container .gb-inside-container {
display: flex;
flex-direction: column;
align-items: center;
width: auto;
}
header.gb-container h1 {
display: inline-block;
padding-bottom: 10px;
position: relative;
}
header.gb-container h1:before {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid #c4c7a0;
}Thanks, David, it looks really nice!
Glad to hear that
This archived topic is closed to new replies.
