CODEWITHSUNDEEP
htmlcss
Edd
Edd

Reputation: 1988

Sup element weird text-decoration in anchor tag

We recently found out that when there's a sup element in an anchor tag, the text-decoration looks weird when it's set to underline. It looks like this: Current state

If it helps, this is the structure of our HTML:

<li>
  <a>
    <p>Some Text
      <span>
        <sup>
          <span>
            <strong>®</strong>
          </span>
        </sup>
      </span>
    </p>
  </a>
</li>

Upvotes: 0

Views: 131

Answers (1)

Bjorn.B
Bjorn.B

Reputation: 1705

When this happened to me, I went this route. Remove the default underline, and add a border below the content.

p {
  display:inline-block;
  border-bottom:1px solid #0001EE;
  padding-bottom:0px;
}
a {
  text-decoration: unset;
}
<li>
  <a href="#">
    <p>Some Text
      <span>
        <sup>
          <span>
            <strong>®</strong>
          </span>
        </sup>
      </span>
    </p>
  </a>
</li>

Upvotes: 2

Related Questions