css分割线添加文字

最新推荐文章于 2023-08-29 10:14:46 发布

萌新之路

最新推荐文章于 2023-08-29 10:14:46 发布

阅读量816

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_44162778/article/details/129691236

版权

效果图：
在这里插入图片描述

html代码：

<div class="divider">
          <p></p>
          <div class="divider-text">申请处理进度</div>
          <p></p>
        </div>

scss代码：

.divider{
    width: 100%;
    display: flex;
    p{
      width: 45%;
       height: 1px;
       border-top: 1px orange dashed;
      margin: 0;
      vertical-align: middle;
     }
    .divider-text{
      padding: 0 20px;
      color: orange;
      transform: translateY(-50%);
      display: inline-block;
      font-size: 17px;
    }