css实现标题左右横线

最近用到了记录一下

页面

<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%;
            }