`text-decoration` behaviour in `button`

Question

Within the same button, I am trying to display text with an underline and some without.

My markup is currently looks like this:

.button-underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
  display: block;
}

<button class="button-underline">
  Text with underline
  <span class="no-underline">Text with no underline</span>
</button>

I expected "Text with no underline" to render with no underline. However, this doesn't appear to be the case.

use inline-block instead of block – Temani Afif Dec 12 '22 at 01:18 — Temani Afif, Dec 12 '22 at 01:18

score 0 · Answer 1 · answered Dec 12 '22 at 00:04

This is happening because your <span> is wrapped inside of your <button>. The button's text-decoration property will underline all children, meaning the span itself doesn't have a text decoration property, however the button still underlines it.

To fix this, you can wrap all other elements inside of the button inside of a button-underline class and select those with CSS.

.button-underline {
    text-decoration: underline;
}
.button-underline .no-underline {
    text-decoration: none;
}

<button>
    <p class="button-underline">Text with underline</p>
    <span class="no-underline">Text with no underline</span>
</button>

<link rel="stylesheet" href="style.css">

Thanks for the reply. Are you able to explain to me why ` – Hon Boey Dec 12 '22 at 00:38 — Hon Boey, Dec 12 '22 at 00:38

`text-decoration` behaviour in `button`

1 Answers1