[Support request] border-bottom lenght

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 1 reply, 2 voices, and was last updated 3 years ago by David.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
March 10, 2023 at 5:58 am #2562853

Marcus

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.

March 10, 2023 at 6:39 am #2562894
David
Staff
Customer Support
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
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.