Как получить часть оформленного текста - НЕ оформленного?

Question

Как я могу сделать промежуток внутри декорированного абзаца, не декорированный?

CSS

p {
    text-decoration: underline;
}

span {
    text-decoration: none;
    /* text-decoration: line-through; */
}

Еще дальше я бы хотел провести линию через непокрашенный промежуток.
У меня такое ощущение, что это должно быть очень легко сделать, поэтому я не могне найти решение в Интернете, или это может быть просто не логично, вообще.

Answer 1

К сожалению, это невозможно при использовании предложенного вами подхода, возможно, если вы сможете стилизовать текстовые узлы внутри абзаца, но CSS не имеет селектора для текстовых узлов.

Вы, конечно, можете достичь желаемого результата, но для этого потребуется стилизация родственных элементов, а не родительского элемента.Например, вы можете обернуть другой текст внутри <span> элементов и вместо них оформить стиль.

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

<p>
  <span class="underline">Is</span>
  <span class="line-through">this</span>
  <span class="underline">what you want to do?</span>
</p>

Answer 2

Это можно сделать с помощью простого трюка, который дает текстовую декорацию: подчеркните промежуток и измените его цвет на тот же цвет фона

как в этом фрагменте

p{
  font-size:25px;
  color:blue;
  text-decoration:underline; 
 }
p span{
  color:red;
  text-decoration:underline;
  text-decoration-color:#fff;
}

см. Результат в этой ручке https://codepen.io/norhanms/pen/mgYoJr?editors=1100