css-自定义下划线

吃饭了吗

已于 2022-10-11 10:05:19 修改

阅读量938

点赞数

文章标签： css

于 2022-10-10 21:29:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41824429/article/details/127252300

版权

通过background渐变来模拟下划线

可以改变颜色和样式
可以通过色标得百分比位置来微调虚线的实虚比例，还可以通过background-size来改变虚线的疏密
在这里插入图片描述

 <style>
     /* 实线下划线 */
     .line {
         background: linear-gradient(blue, blue) no-repeat;
         background-size: 100% 1px;
         background-position: 0 1.15em;
         text-shadow: .05em 0 white, -.05em 0 white;
     }

     /* 虚线下划线 */
     .line1 {
         background: linear-gradient(90deg, blue 66%, transparent 0) repeat-x;
         background-size: 0.2em 1px;
         background-position: 0 1.15em;
     }
 </style>

 <main>
     <a class="line">aaaaaaaaa</a>
     <a class="line1">aaaaaaaaa</a>
 </main>

目前css的一些新属性支持下划线样式的修改

在这里插入图片描述

<style>
     .line2 {
         text-decoration: underline;
         text-decoration-color: blue;
         text-decoration-style: dashed;
     }
     .line3 {
         text-decoration: underline;
         text-decoration-color: blue;
         text-decoration-style: dashed;
     }
 </style>
 <main>
     <a class="line2">aaaaaaaaa</a>
     <a class="line3">aaaaaaaaa</a>
 </main>