css实现标题左右横线

最新推荐文章于 2023-08-05 00:00:14 发布

转载最新推荐文章于 2023-08-05 00:00:14 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sjxx/p/10394091.html

本文介绍了一种使用CSS实现带有水平分割线的标题样式的方法，通过:before和:after伪元素，可以轻松地在标题文字两侧添加分割线，使页面布局更加美观。

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

最近用到了记录一下

页面

<div class="subtitle">
                    马上邀请好友得奖励
                </div>

样式

.subtitle {
              position: relative;
              font-size: .24rem;
              color: #999999;
              height: 45px;
              line-height: 45px;
              text-align: center;
            }
            .subtitle:before {
              content: "";
              position: absolute;
              width: 30%;
              height: 1px;
              top: 50%;
              background-color: #ededed;
              left: 2%;
            }
            .subtitle:after {
              content: "";
              position: absolute;
              width: 30%;
              height: 1px;
              top: 50%;
              background-color: #ededed;
              right: 2%;
            }

转载于:https://www.cnblogs.com/sjxx/p/10394091.html