[SOLVED] How to remove the text-decoration underline; from the span element inside the flex parent?

How to remove the text-decoration underline; from the span element inside the flex parent?

I want to remove the underline from the <span> tag inside the <p> tag, which has the display: flex; property.

The <p> tag in my case has to be flex.

I already searched this problem on the internet and found solutions that do not apply to a flex parent.

They said that adding text-decoration: none; and display: inline-block; to the span should fix the problem, but it does not.

<p style="display: flex; gap: 10px; text-decoration: underline;">
    This should have underline
    <span style="text-decoration: none; display: inline-block;">This should not have underline</span>
</p>

Solution

You should never make a text container a flexbox container but if you want to keep the same configuration then use float on the span. It won't affect the layout, it will simply disable the underline propagation.

<p style="display: flex; gap: 10px; text-decoration: underline;">
    This should have underline
    <span style="float: left;">This should not have underline</span>
</p>