Как сделать так, чтобы inline-block span наследовал все текстовое оформление всех своих предков?

Question

Я сделал интервал встроенного блока внутри тега u и тега s, надеясь, что он будет отображаться с текстовыми украшениями как для удара, так и для отмены, но ничего из этого не произошло.

Если Я установил для text-decoration значение inherit, он будет наследовать только текстовое оформление своего родителя, без наследования от других своих предков.

Как достичь этой цели: сохраняя его как встроенный блок, он должен наследовать текстовые украшения всех своих предков.

span {
  display: inline-block;
}

<u>
  <s>
    yes <span>man</span> no
  </s>
</u>

Answer 1

Вы можете использовать следующее решение:

u s span {
  display: inline-block;
  text-decoration: underline line-through;
}

<u><s>yes <span>man</span> no</s></u>

Вы можете установить text-decoration с underline и line-through для элемента <span>, чтобы получить такое же оформление текста, вызванное вложенным <u> и <s> элементов. Использование text-decoration: inherits; наследует только текстовое оформление родительского элемента (здесь <s>).

Вы можете использовать следующие CSS для покрытия различных комбинаций тегов:

.editor-container u s span, 
.editor-container s u span {
  display: inline-block;
  text-decoration: underline line-through;
}
.editor-container u span {
  display: inline-block;
  text-decoration: underline;
}
.editor-container s span {
  display: inline-block;
  text-decoration: line-through;
}

<div class="editor-container">
  <u><s>yes <span>man</span> no</s></u>
  <s><u>yes <span>man</span> no</u></s>
  <u>yes <span>man</span> no</u>
  <s>yes <span>man</span> no</s>
  
  <!-- you can also use b, strong, i without additional CSS -->
  <b><s>yes <span>man</span> no</s></b>
  <s><b>yes <span>man</span> no</b></s>
  <strong><s>yes <span>man</span> no</s></strong>
  <s><strong>yes <span>man</span> no</strong></s>
  <i><s>yes <span>man</span> no</s></i>
</div>

Вы также можете установить <span> в редакторе на display: inline; вместо определения всех этих специальных правил:

.editor-container span {
  display: inline;
}

<div class="editor-container">
  <u><s>yes <span>man</span> no</s></u>
</div>