css 左下角线条延伸

CSS的一个比较常见的需求就是能够让某个元素具有左下角线条，而且这条线条可以自适应宽度并延伸到元素底部。那么该怎么实现呢？

.box {
      position: relative;
      display: inline-block;
      padding: 10px;
      margin-bottom: 20px;
}
.box::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #333;
      transform: scaleY(0);
      transform-origin: bottom left;
      transition: transform 0.3s ease-out;
}
.box:hover::before {
      transform: scaleY(1);
}
    

上面的代码中，我们使用了一个伪元素来实现左下角线条的效果。该元素的位置为absolute，居于.box元素的底部左侧，并且width为100%。由于该元素有一个高度，并且transform的scaleY为0，所以在初始状态下该元素是隐藏的。

当鼠标悬浮在.box元素上时，我们对伪元素的transform属性进行了设置，将其scaleY属性变为1，从而让隐藏的线条显现。由于我们对transform属性设置了transition，所以该效果是平滑的，不会出现突兀的变化。

需要注意的一点是，我们必须对.box元素设置position: relative，否则伪元素的绝对定位无法生效。

综上所述，使用伪元素并结合transform属性，即可简单实现一个具有自适应宽度的左下角线条效果。

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