关于在一段文本上加修饰划线的效果

wthee 发布于2019-08-02 10:11 / 3498人阅读

摘要：最近遇到一个需求，要在一段文字上面加上一条背景色。类似于上学时候用的记号笔做笔记一样的效果。第二种和第一种类似还是依靠渐变效果，不过是从左到右的实现。元素相对定位，伪类绝对定位，设置来实现覆盖住文字的效果。

最近遇到一个需求，要在一段文字上面加上一条背景色。类似于上学时候用的记号笔做笔记一样的效果。
第一映像想到的可能是text-decoration: line-through；不过这里有一个问题，先上图：

放学啦啦

#s5{
  text-decoration: line-through;
}
#s5 span{
  font-size: 60px;
}

很明显因为文字大小不一致，导致line-through的位置会错位。

再看下图的解决办法，这里就没有改变个别文字的大小了。小伙伴们自己可以动手试一试。

附上代码：


  雯子同学
  丸子同学
  早上好，老师
  早上好， 同学们

div {
    font-size: 40px;
}
#s1 {
    background-image: linear-gradient(to bottom, #fff 45%, #0aa 45%, #0aa 60%, #fff 60%);
}
#s2 {
    background-image: linear-gradient(to right, blue, blue 100%);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 100% 7px;
}
#s3 {
    border-bottom: 8px solid red;
    display: inline-block;
    height: 26px;
}
#s4 {
    position: relative;
}
#s4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    display: block;
    width: 100%;
    border: 5px solid yellow;
}

第一种借助了linear-gradient实现从上到下的渐变效果，通过属性巧妙的达到锐变的效果。

第二种和第一种类似还是依靠渐变效果，不过是从左到右的实现。比起第一种可调性更大。花样更多一点。

第三种也是一种很不错，用的比较多的方法。就不过多解释了。

看到这里各位小伙伴们，有没有发现一个问题。哪天设计过来说，你这线怎么在文字后面，不是说让你划掉那段文字吗？？？这下尴尬了。
在这里我要介绍第四种了哈哈哈

通过:after或者:before。元素相对定位，伪类绝对定位，设置border来实现覆盖住文字的效果。

好啦，到这里就算是讲完了。写的有点烂，CSS一直是我的弱项。希望可以帮到有需要的小伙伴们～

云服务器 GPU云服务器 asp文本框修饰一段巧妙的css html5中的下划线在一

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52184.html

关于在一段文本上加修饰划线的效果

摘要：最近遇到一个需求，要在一段文字上面加上一条背景色。类似于上学时候用的记号笔做笔记一样的效果。第二种和第一种类似还是依靠渐变效果，不过是从左到右的实现。元素相对定位，伪类绝对定位，设置来实现覆盖住文字的效果。最近遇到一个需求，要在一段文字上面加上一条背景色。类似于上学时候用的记号笔做笔记一样的效果。第一映像想到的可能是text-decoration: line-through；不过这里...

mzlogin 2019-08-30 15:53 评论0 收藏0
HTML基础总结

摘要：细化知识点总结标签都是标题标签，定义一段话的标题，最大，依次递减，最小标题标签的作用让文本加粗显示段落标签标签用来显示一段文本图片，它会忽略源代码中的排版块元素独占一行的元素，和相邻的元素不能共享同一行所有的块元素都有属性和元素都是HTML细化知识点总结 1.h1-h6标签都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小标题标签的作用：让文本加粗显示 2. 段落标签：p...

Jacendfeng 2019-04-23 11:54 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

wua_wua2012 2019-08-22 16:13 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

Tamic 2019-08-02 10:09 评论0 收藏0