欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css伪元素实现下划线

程序员文章站 2023-12-24 20:22:15
...

前言:

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

效果图:

css伪元素实现下划线

实现代码:

.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);
    }

 

相关标签: css css 伪元素

上一篇:

下一篇: