Archived topic
border-bottom lenght
1 reply · Started by Marcus on March 10, 2023
Hi, please can you help me to solve this problem? I am using this CSS:
h1 {
border-bottom: 10px solid #000000;
padding-bottom: 10px;
display: inline-block;
text-transform: uppercase;
}
The function is fine. But if the H1 is two lines long, the border-bottom is 100 % in the lenghts. Is it possible to change the lenght only to the lenghts of the characters in the second line? (not underline the first one)
Thank you very much.
Hi there,
the H1 would have to be inline and the border would need to be on a pseudo element:
eg.
h1 {
position: relative;
display: inline;
}
h1:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
border-bottom: 10px solid;
}The bottom -10px is what offsets the border position.
The downside is that inline elements won't attract top/bottom spacing, so you will need to apply that to the H1s parent container or elements that come after it
