css伪元素实现下划线

前言:

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

效果图:

css伪元素实现下划线_第1张图片

实现代码:

.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,伪元素)