Special underlined title

[hiegl]

Hi guys,
is anyone aware of a method to have the title element (WPBakery) using the underlined style, where the line stretches only the length of the title text? Even better would be a line below stretching the whole container width, while the part of the line, that stretches the text, has an alternative color.

I consider to use custom CSS with a pseudo-element, but how does this only stretch the text element?

Thanks,
Bernhard

Topic

[hiegl]

Looks like everyone is busy right now. The hub is quite silent. :-/

[Marius1989]

Should be pretty easy to achieve via little CSS. But always hard to tell or help without any live demo.
Cheers!

[hiegl]

Hi Marius,

here is an example: http://capethemes.com/demo/knowbase/
Scroll down and see the titles (e.g. Getting started).

The orange line below stretches only the text, while the light grey line stretches the whole container.
There is a span with an ::after element inside a h4. Could you achieve this in Impeka?

Thanks a lot for your help.

Kind regards,
Bernhard

[Marius1989]

Please give your title a custom class inside the title element (and replace it with the “custom-class” you will find in the code below). You can find it at the very bottom.

This is your code, feel free to adjust it to your needs:

.grve-title.custom-class::after,
.grve-title.custom-class span::after {
content: ”;
display: block;
position: absolute;
width: 100%;
bottom: -15px;
height: 3px;
}

.grve-title.custom-class::after {
background-color: #efefef;
}

.grve-title.custom-class span::after {
background-color: #ffb44c;
z-index: 1;
}

.grve-title.custom-class span {
position: relative; /*makes sure the colored line fits the titles width*/
}

[hiegl]

Bravo! This works perfectly. I know, that I should really improve my CSS skills.

Thanks a lot!

[Marius1989]

Glad it worked, Bernhard.
Always open to help out regarding very minor things if I have the time.

Cheers!

[Author]

Replies