半句話的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類裏面。