line-through not working as should

Question

class .slogan has "text-decoration: line-through;", but "span" has "text-decoration: none;" Why is it not canceling it?

header {
  background: #34abf8;
  width: 100%;
  height: 500px;
}
.slogan {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 4.5em;
  text-decoration: line-through;
}
.slogan span {
  font-weight: 500;
  font-size: 0.45em;
  text-decoration: none;
}

<header>

  <div class="slogan">
  This text is underlined. <span>But this shouldn't be underlined</span>
  </div>

</header>

Because you can't override the parent's property like that with text-decoration — Paulie_D, Mar 31 '15 at 16:48
possible duplicate of [Inherited Text-Decoration style](http://stackoverflow.com/questions/1261955/inherited-text-decoration-style) — showdev, Mar 31 '15 at 16:49

Hashem Qolami · Answer 1 · 2015-03-31T17:04:08.483

The spec states it clearly:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

However, text decorations are propagated to the contents of descendants unless they are displayed as atomic inline-level elements, floated, positioned absolutely.

16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property

[...] Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Therefore, you could change the display of the span to inline-block in order to prevent the <span> element from being affected by decoration of the parent:

header {
  background: #34abf8;
  width: 100%;
  height: 500px;
}
.slogan {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 4.5em;
  text-decoration: line-through;
}
.slogan span {
  font-weight: 500;
  font-size: 0.45em;
  display: inline-block;
}

<header>

  <div class="slogan">
  This text is underlined. <span>But this shouldn't be underlined</span>
  </div>

</header>

score 1 · Answer 2 · answered Mar 31 '15 at 16:53

It's not a property of the text nodes, it's the entire .slogan element that has line-through.

For example, you can see here that two is underlined twice because both .slogan and span are underlined.

.slogan {
   text-decoration: underline;
   font-size: 20px;
}

.slogan span {
   font-size: 10px;
   text-decoration: underline;
}

<div class="slogan">
   one ... <span> two </span>
</div>

score 0 · Answer 3 · answered Mar 31 '15 at 16:54

span has an inline display , reset the display to anything else than inline should allow you to override parent text-decoration on its content.

added a <b> to let you see defaut behavior of inline element.

header {
  background: #34abf8;
  width: 100%;
  height: 500px;
}
.slogan {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 4.5em;
  text-decoration: line-through;
}
.slogan span {
  font-weight: 500;
  font-size: 0.45em;
  text-decoration: none;
  display:inline-block
}
b {padding:0.25em;}

<header>

  <div class="slogan">
  This text is underlined. <span>But this shouldn't be underlined</span> <b>&nbsp;</b>
  </div>

</header>

line-through not working as should

3 Answers3