text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签

最新推荐文章于 2025-10-25 18:37:57 发布

转载最新推荐文章于 2025-10-25 18:37:57 发布 · 2.8w 阅读

前端开发专栏收录该内容

118 篇文章

订阅专栏

本文介绍了在HTML页面中实现文字中间穿过横线效果的三种方法：使用CSS样式text-decoration属性、del标签以及s标签，并提供了示例代码。

如何在html页面中实现横线从文字中间穿过的效果呢？

要实现这种效果有三种方法可实现，如下：

1、是用CSS样式表中 text-decoration:line-through; 属性

2、是使用<del>186.00</del>html标签

3、是使用<s>186.00</s>html标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MJ.588cy.com</title>
<style type="text/css">
b{ text-decoration: line-through; font-weight:100;}
</style>
</head>

<body>
<b>186.00</b>
<del>186.00</del>
<s>186.00</s>
</body>
</html>