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