CODEWITHSUNDEEP
css
Alexey Tseitlin
Alexey Tseitlin

Reputation: 1309

line-through not working as should

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>

Upvotes: 6

Views: 7004

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99484

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>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105873

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>

Upvotes: 0

Dan Blows
Dan Blows

Reputation: 21174

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>

Upvotes: 1

Related Questions