Underlining headings for multiple lines

user_11398920 0
Viewed 280

I am trying to create a heading with a nice underline. Not an actual CSS underline, but an underline partly overlaps my headings.

My code works correct for single line headings, but I am using this for a CMS, so it is possible that the headings become longer (multi-line). This is where I run into problems.

I understand that this is because the line gets inserted ::after the content, but I don't know if there is anything available to do it per line.

Code example

The code below shows two headings. As you can see, the correct underline works for one line only. Is there a solution on how to get the underline for multi-lines instead of sticking it under the complete block?

h1{
    font-weight: 600;
    margin: 0 0 5px 0;
    position: relative;
    display: inline;
}

h1::after{
    content: '';
    position: absolute;
    display: block;
    width: 100%;

    z-index: -1;

    opacity: 60%;
    bottom: 0.1em;
    height: 0.25em;
    background-color: lightblue;
}
<h1>Just a heading</h1>
<br>
<br>
<h1>A very very very very very very very very very very very very very very very very very very very very example long heading</h1>

css html javascript
2 Answers

You can use inverted box-shadow instead.

Like so -

h1{
    font-weight: 600;
    margin: 0 0 5px 0;
    position: relative;
    display: inline;
    box-shadow: inset 0 -3px #fff, inset 0 -12px lightblue;
}
<h1>Just a heading</h1>
<br>
<br>
<h1>A very very very very very very very very very very very very very very very very very very very very example long heading</h1>

user_127309380

You can do something like this :

h1{
    font-weight: 600;
    margin: 0 0 5px 0;
    position: relative;
    display: inline;
    text-decoration: underline lightblue;
}
<h1>Just a heading</h1>
<br>
<br>
<h1>A very very very very very very very very very very very very very very very very very very very very example long heading</h1>

user_140461260
Related