Почему я не могу убрать подчеркивание текста?

Question

У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?

.one {
  display: block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}

div {
  width: 50%;
  height: 500px;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
}

<div>
  <span class="one">Hello, world!</span>
  <br>
  <span class="two">Hello!</span>  
</div>

Answer 1

Как указано в MDN

Украшения текста отрисовываются вокруг дочерних элементов. Это значит, что если у элемента установлено свойство text-decoration, то дочерний элемент не может удалить его для себя.

_{перевод ответа @xpy}

В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float, либо абсолютное позиционирование).

Так же есть уточнение

декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как inline-block и inline-table.

.one {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}

div {
  width: 50%;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
  padding: 10px;
}

<div>
  <span class="one">Hello, world!</span>
  <br>
  <span class="two">Hello!</span>
</div>

БЛОГ НА HUSL

Почему я не могу убрать подчеркивание текста?

Ответы (1 шт):