半个句子上的HTML文字装饰？

Question

我想知道如何将文本修饰放在<li>的特定部分而不是整个句子中。这是一段代码片段。

<ul>
<li>I'm a List item!</li>
<li style="text-decoration:line-through">From Here til here should have a line through, not these words</li>

谢谢！

Answer 1

添加另一个元素。将样式应用于该元素。

span {
  text-decoration: line-through
}

<ul>
  <li>I'm a List item!</li>
  <li><span>From Here til here should have a line through,</span> not these words</li>

...您选择的元素将取决于为什么您希望该线路通过。 <del>可能适合。

Answer 2

试试这个：

span {
  text-decoration: line-through
}

<ul>
  <li>I'm a List item!</li>
  <li>From Here til here should have a <span>line through</span>, not these words</li>

Answer 3

您需要将其包装在另一个元素中。 span元素通常用于此：

<强> HTML

<ul>
    <li>I'm a List item!</li>
    <li class="half-line"><span>From Here til here should have a line through,</span> not these words</li>
</ul>

<强> CSS

.half-line span {
    text-decoration: line-through
}

这会将text-decoration属性仅应用于span课程内的任何.half-line元素。