在网页设计中，有时我们需要为文本添加删除线效果来突出某些内容已被取消或不再适用。CSS作为网页样式设计的重要工具，为我们提供了多种实现删除线效果的方法。

最常见且简单的方式是使用text-decoration属性。我们只需在CSS样式表中选择要添加删除线的元素，然后设置text-decoration为line-through即可。例如，有一个段落元素p，代码如下：

p {
    text-decoration: line-through;
}

这样，该段落内的所有文本都会呈现出删除线效果。这种方法适用于大部分常规文本的删除线需求，无论是标题、列表项还是普通段落文本都能轻松实现。

如果只想对部分文本添加删除线效果，我们可以使用span标签来包裹这部分文本，然后单独为span设置样式。例如：

<p>这是一段 <span class="strikethrough">带有删除线</span> 的文本。</p>

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

除了基本的text-decoration属性，在一些特殊场景下，我们还可以利用CSS的伪元素来创建更具个性化的删除线效果。比如，使用:before和:after伪元素结合边框来模拟删除线。以下是一个示例：

.deleted-text {
    position: relative;
}
.deleted-text:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
}

通过设置伪元素的样式，我们可以对删除线的颜色、粗细、位置等进行更精细的控制。

在响应式设计中，不同的屏幕尺寸下删除线效果可能需要进行适当调整。我们可以结合媒体查询，根据屏幕宽度来改变删除线的样式。例如：

@media (max-width: 768px) {
    p {
        text-decoration: none;
    }
}

这段代码表示在屏幕宽度小于等于768像素时，段落文本的删除线效果将被移除，以适应小屏幕设备的显示需求。

CSS为我们提供了丰富多样的方式来实现删除线效果，无论是简单的基本样式，还是复杂的自定义效果，都能满足网页设计中的各种需求。掌握这些技巧，能让我们的网页更加美观和实用。