前端html实现删除线的两种方法（下划线）css样式总结

朴灿烈づ我的快乐病毒、 2022-01-22 23:55 845阅读 0赞

首先我们先来看一下text-decoration

text-decoration 通常我们用于给链接修改装饰效果（注意： 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

<table> 
 <tbody> 
  <tr> 
   <td> <p>值</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>none</p> </td> 
   <td> <p>默认。定义标准的文本。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>underline</p> </td> 
   <td> <p>定义文本下的一条线。下划线 也是我们链接自带的</p> </td> 
  </tr> 
  <tr> 
   <td> <p>overline</p> </td> 
   <td> <p>定义文本上的一条线。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>line-through</p> </td> 
   <td> <p>定义穿过文本下的一条线。</p> </td> 
  </tr> 
 </tbody> 
</table>

我们也可以用<del></del>来实现删除线---下面展示一下代码（防止搞混，overline也测试了，描述不清会以为可以实现删除线）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70][]

### 效果 ###

![20190601113051801.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FJQl9LYXNpYw_size_16_color_FFFFFF_t_70]: /images/20220123/c60b933d020443d5bfceabc5b8a7469d.png
[20190601113051801.png]: /images/20220123/9ba43d114a0f4b15840c9f1b86ae1079.png

发表评论取消回复

表情：

评论列表（有 0 条评论，845人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实现html转pdf方法总结

最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出

﹏ヽ暗。殇╰゛Y/ 2023年10月11日 15:27/ 0 赞/ 55 阅读

相关详解react的两种动态改变css样式的方法

第一种：动态添加class，以点击按钮让文字显示隐藏为demo 1 2 3 4 5 6 7 8 9 10 11 12 13

Bertha 。/ 2022年10月15日 00:43/ 0 赞/ 219 阅读

相关 html5css字体下划线,如何利用css样式做出文字的下划线？

如何利用css样式做出文字的下划线？在将网页设计完成后，接下来就需要前端和后端工程师的配合，来将网页正式上线了。但是身为网页设计师，还是有必要掌握一些前段知识的，主要指ht

怼烎@/ 2022年10月06日 10:53/ 0 赞/ 23 阅读

相关 html下划线虚线样式,CSS不同样式的虚线下划线

CSS不同样式的虚线下划线 body\{margin:0px;padding:0px;font-size:9pt;background-color:\EEEEEE;\} .

清疚/ 2022年10月06日 10:53/ 0 赞/ 24 阅读

相关 HTML引入css样式的三种方式，css选择器的三种样式

文章目录前言一. css样式的三种方式第一种：内联定义方式第二种：样式块

青旅半醒/ 2022年10月05日 00:53/ 0 赞/ 267 阅读

相关线程的两种实现方法和进程的两种实现方法。

线程实现 1. 继承 Thread 类 package com.yuxin.learn; class MyThre

￡神魔★判官ぃ/ 2022年09月24日 14:22/ 0 赞/ 212 阅读

相关 HTML中引入CSS的四种方法（前端css面试题）

忙活的一阵子，今天终于稳定了，特意来写一篇博客来温习一下之前的知识点，也是自己在面试当中碰到的面试题。在HTML里面导入CSS总共有四种方式： \- 内联方式 \-

短命女/ 2022年06月17日 02:46/ 0 赞/ 227 阅读

相关 JAVA：线程总结及多线程实现的两种方法

JAVA：线程总结目录目录 JAVA：线程总结 JAVA：线程总结 01\_多线程(多线程的引入)(了解) 02\_多线程(多线程并行和并发的区别)

男娘i/ 2022年04月23日 11:26/ 0 赞/ 236 阅读

相关前端html实现删除线的两种方法（下划线）css样式总结

首先我们先来看一下text-decoration text-decoration 通常我们用于给链接修改装饰效果（注意：这个属性允许对文本设置某种效果，如加下划线。如果后代

朴灿烈づ我的快乐病毒、/ 2022年01月22日 23:55/ 0 赞/ 846 阅读

相关 HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级：方法 css的样式引用由3种方式。分别为行内样式、内部样式（嵌入式）和外部样式；行内样式： ...

朱雀/ 2021年03月26日 13:53/ 0 赞/ 873 阅读