css 伪类实现中间文字两边画横线

最新推荐文章于 2024-07-22 10:57:11 发布

原创最新推荐文章于 2024-07-22 10:57:11 发布 · 983 阅读

2 ·

CC 4.0 BY-SA版权

工作专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用CSS实现文字旁侧边线效果的方法，通过`:after`伪元素结合绝对定位与边框虚线属性，轻松实现右侧画线效果。适用于网页设计中需要突出显示文本的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：我是文字---------------------------------------

代码实现了右边画线，左边画线同理。

<div class="hour-box">
       <p class="hour-line">我是文字</p>
 </div>

.hour-box {
          position: relative;
          .hour-line {
            &:after {
              content: '';
              height: 1px;
              position: absolute;
              border-top: 1px dashed '#333';
              width: calc(100% - 50px);
              top: 50%;
            }
          }
        }