Thick underline behind text

前端 未结 4 1282
离开以前
离开以前 2020-12-07 04:14

How to reproduce this sort of underline behind the text ABC using spans and css?

\"thick

4条回答
  •  春和景丽
    2020-12-07 04:58

    http://codepen.io/OxyDesign/pen/eHAac

    With :before in absolute position

    CSS

    .underlined-text {
      font-size:100px;
    }
    .underlined {
      display: block;
      float:left;
      height:92px;
      position:relative;
    }
    .underlined:before {
      display: block;
      content:'';
      position:absolute;
      width:100%;
      bottom:0;
      left:0;
      background:#f66;
      z-index:-1;
    }
    .underlined.first:before {
      height:15px;
    }
    .underlined.second:before {
      height:30px;
    }
    .underlined.third:before {
      height:45px;
    }
    

提交回复
热议问题