Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


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

    You need to wrap your span with display: inline-block; like this.

    Login or Signup to reply.
  2. 0

    Remove display:flex; on <p> should work.

    <p style="text-decoration: underline;">
  This should have underline
  <span style="text-decoration: none; display: inline-block;">This should not have underline</span>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search