css 双色下划线

在前端开发中，我们经常使用CSS来美化页面，其中下划线是一种常见的文本装饰方式。但是，普通的下划线可能显得有些单调，那么CSS双色下划线就成为了一个好的选择。

下面，我们就来介绍一下如何使用CSS来实现双色下划线。

  /* HTML */  p>
    这是一段带双色下划线的文字/p>
  /* CSS */  p {
        position: relative;
        display: inline-block;
        font-size: 20px;
        margin: 0 10px;
        padding-bottom: 5px;
        line-height: 1;
  }
  /* 下划线1 */  p::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background-color: red;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease;
  }
  /* 下划线2 */  p::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        background-color: blue;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .3s ease;
  }
  /* 鼠标移上去时下划线动画 */  p:hover::before {
        transform: scaleX(1);
  }
  p:hover::after {
        transform: scaleX(1);
  }
    

我们来分析一下上面的代码。首先在CSS中，我们给p标签定位为relative，让其内部的伪元素能够依照p标签的位置进行布局。

接下来是伪元素的部分。我们使用伪元素::before和::after来分别实现两条下划线，它们被定位在p标签的底部。

我们在下划线样式中使用了transform: scaleX(0)，来让下划线默认不显示。当鼠标移上去时，我们使用:hover选择器来触发下划线动画，使用transform: scaleX(1)来将下划线慢慢拉长，从而完成双色下划线的效果。

上述代码旨在提供一种实现双色下划线效果的思路，具体的颜色、样式等可以根据实际需要进行调整。

总结：CSS双色下划线可以为简单的文本增添一份美感，让网页呈现更加丰富多彩的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！