Get subheadings underlined

[riugn557]

Hi there,

On this page https://thelanguagesherpa.com/russian-guide/ I have a large amount of subheadings running down the entire page. They say things like ‘Beginners - Reading’, ‘Advanced - Writing’, etc.

Would you please tell me how I can

1. have the text of these subheadings underlined?
2. alter the thickness of this line?
3. alter the colour of this line?

Thank you!
LS

[thai]

Hi There,

Please add the following CSS under X > Theme Options > CSS:

.underline-headline span {
    position: relative;
}
.underline-headline span:after {
    position:absolute;
    width: calc(100% - 1.5em);
    height: 2px;
    background-color: #000;
    content: '';
    right: 0;
    left: auto;
    bottom: 0;
}

Then add the underline-headline CSS class to your headlines:

Let us know how it goes!

[riugn557]

Hi Thai,

Thats great - thank you so much for your help.

Just one last thing: do you know how I can add a couple of pixels of space between the line and the words above it?

Thank you,
LS

[Prasant]

Hello @riugn557,

Thanks for updating the thread.

Yes, absolutely. Please replace the second piece of code that my colleague shared with following:

.underline-headline span:after{
    position: absolute;
    width: calc(100% - 1.5em);
    height: 5px;
    background-color: red;
    content: '';
    right: 0;
    left: auto;
    bottom: 0;
    top: 40px

}

Let us know how it goes.

Thanks.

[riugn557]

Hi Prasant,

Thanks for that.

I noticed that as it stands the coloured line is positioned correctly when the subheading is only on one line.

However, you will notice that with smaller screen sizes, which force the subheading to run over into multiple lines, the coloured line is no longer in the right position. Do you know how I can fix the coloured line to the bottom of the bottom line (if there are multiple ones) of the subheading?

Thank you!
LS

[nabeel]

Hi again,

Yes I see the issue, you can give simple border bottom to your headlines to avoid such issue, for example replace this code:

.reading span:after {
    position: absolute;
    width: calc(100% - 1.5em);
    height: 5px;
    background-color: #ff6e00;
    content: '';
    right: 0;
    left: auto;
    bottom: 0;
    top: 35px;
}

With this one:

.reading span {
    border-bottom: 6px solid #ff6e00;
    padding-bottom: 15px;
}

Or alternatively you can just remove top: 35px; from the original code, this will also fix the issue.

Hope this helps!

[riugn557]

Hi Nabeel,

I am experimenting on the subheadings that say “grammar & vocabulary” with the red icons and lines (just for your reference).

I have gone with your second solution - to remove top: 35px; - from the original code and this has now put the line back in the right position for all screen widths.

However, there is another problem: when the screen is at desktop width the line extends perfectly just to the end of the ‘Y’ in ‘Vocabulary’. However when the screen is narrower you can see that the red line goes right beyond it and hits the right edge of the element box…

Do you know how I can make it so that the red line extends no further than the text itself?

Thank you!
LS

[rad]

Hi there,

The line is correctly aligned with the text in mobile device, it creates an illusion of misalignment due to the linebreaks between words since two words can’t fit in a single line, or the whole sentence can’t fit in a single line. Hence, the space you’re seeing is still part of the text.

My recommendation is changing its font size to fit the text to your preferred width. Example, inspect your headline and go to Customize > Element CSS and add this CSS to make it responsive.

$el > span {
font-size: calc(100% + 2vw) !important;
}

Thanks!

Thanks!

[riugn557]

OK, thank you, Rad

[jade]

You’re welcome.