css伪元素实现下划线

最新推荐文章于 2024-10-06 15:04:56 发布

妍崽崽@

最新推荐文章于 2024-10-06 15:04:56 发布

阅读量4.2k

点赞数 5

分类专栏： css 文章标签： css 伪元素

本文链接：https://blog.csdn.net/weixin_44727080/article/details/114979538

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：

css伪元素实现下划线效果，用一个border-bottom+伪元素实现双重下划线效果

效果图：

实现代码：

.titleT{
      position: relative;
      font-size: 28px;
      width: 112px;
      height: 44px;
      line-height: 40px;
      text-align: center;
      border-bottom:2px solid #5A8BFF; //第一层下划线
      margin:63px auto 40px;
    }
    .titleT:after {//伪元素实现第二层
      content: " ";
      position: absolute;
      left: 0;
      bottom: -9px;
      width: 100%;
      height: 1px;
      border-top: 1px solid #5A8BFF;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }