[Resolved] Underline H2 but just the text not block?

[Andy]

Hey folks

As per the title – I want to apply an underline effect to the H2s BUT just to the text rather than the entire block.

This is the code I’m using currently. I’m not sure what to replace the width 100% with?
appreciate your help, thanks!

ETA: I’m using border rather than text decoration as I want that curved/swoosh effect

`h2{
position: relative;
margin-right: 1rem;}
h2:after {
content: “”;
position: absolute;
bottom: -10px;
left: 0;
height: 7px;
width: 100%;
border: solid 3px #D7CB83;
border-color: #D7CB83 transparent transparent transparent;
border-radius: 30%;
}

[Fernando]

Hi Andy,

Can you provide the link to a page where you’re trying to apply this?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Andy]

Hey Fernando 🙂
Thanks, see in PI field

[Fernando]

Try adding width: fit-content to your H2.

So this code:

h2{
position: relative;
margin-right: 1rem;}

Becomes:

h2{
position: relative;
margin-right: 1rem;
width:fit-content;}

[Andy]

Brilliant thanks so much for the solution and also mega quick response. much appreciated:)

[Fernando]

You’re welcome Andy!

[Author]

Posts