両端に斜め線が入った見出しのつくり方

こんにちは。本題に入る前に少し余談ですが、今回の記事で120記事めになります。

色々記事を書いたのですが、実はなかには検索1位になる記事もあって驚いています(°_°)

記事を見てもらうとわかるのですが、それほど文字数が多いわけでもないですし、内容も他の方と比べると薄っぺらいですし汗、今では週1投稿ですがこんなブログでも検索上位に行くことがあるのだな〜と！

やはりブログは継続力が大事なんだなぁと身をもって実感しました。
そんな感じで余談は終わりまして、本題に入りますね！

今日はメモがてら「両端に斜め線が入った見出しのつくり方」について書きます！

イメージとしてはこんな感じです＾＾
ちょっとポップな感じ？になりますね٩( ‘ω’ )و

ではさっそくコードをのせます〜！

コード

HTML編

      <section class="contSect">
        <div class="inner">
          <h2 class="sectTit">斜め線がついた見出し</h2>
        </div>
        <!-- / .inner -->
      </section>
      <!-- /.contSect -->

CSS編

.sectTit {
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  font-size: 2.5rem;
}

.sectTit:before,
.sectTit:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #faa94d;//斜め線の色
  width: 2px;//斜め線の太さ
  height: 2em;//斜め線の長さ
  margin: 0 1em;//テキストとの間に左右余白をつくる
  margin-top: -.2em;//斜め線の位置調整
  vertical-align: middle;
}

.sectTit:before {
  transform: rotate(-35deg);//角度調整
}

.sectTit:after {
  transform: rotate(35deg);//角度調整
}

斜め線の部分は毎度お馴染み擬似要素で作ります。

いくつかポイントを書きますね＾＾

こんな感じです！
参考になれば幸いです。

では今日はここまで〜〜