使用before、after给文字前后添加横线

最新推荐文章于 2023-08-21 15:19:07 发布

原创最新推荐文章于 2023-08-21 15:19:07 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

css3 同时被 2 个专栏收录

22 篇文章

订阅专栏

sass

4 篇文章

订阅专栏

本文深入探讨了CSS中.endSession类的使用技巧，包括如何通过:before和:after伪元素实现精细的布局控制，如线条的位置调整等，对于前端开发者来说，这些细节能够提升网页的视觉效果。

<style scoped lang="scss">

.endSession{
  text-align: center;
  position: relative;
  &:after{
    content: '';
    width: 52px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 29px;
  }
  &:before{
    content: '';
    width: 52px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    position: absolute;
    top: 11px;
    left: 29px;
  }
}

</style>