線が前後についた見出しの作り方

こんにちは。

今日は線が前後についた見出しの作り方について書こうと思います！

どんな感じかというと、この「関連情報」という見出し部分ですね。

よくありそうなデザインです！

見出しの両端に少し余白を空けて、インナー幅いっぱいまで線が広がるようにしています。

また、文字が増減してもデザインが崩れないです＾＾

ではさっそくコードをみていきましょう！

コード

HTML編

            <div class="titBlock">
              <h3 class="sectTit"><span>関連情報</span></h3>
            </div>

<h3>の中身を<span>で囲っています。

CSS編

sassで書いているので見慣れないかもしれませんが、& :beforeと&:afterが<span>の擬似要素です。

    .sectTit
    {
      overflow: hidden;
      text-align: center;

      span
      {
        position: relative;
        display: inline-block;

        &:before,
        &:after
        {
          position: absolute;
          top: 50%;

          width: 100vw;
          height: 1px;

          background-color: #fff;
          content: "";
        }
        &:before
        {
          right: 100%;
          margin-right: 1.7em;
        }
        &:after
        {
          left: 100%;
          margin-left: 1.7em;
        }
      }

解説していきますね。

まずポイントは、擬似要素の親は<h3>(.sectTit)ではなく<span>にする事！！

次に、擬似要素のbefore,afterの位置の値はそれぞれ100％としていますがどういう意味か分かりますでしょうか？

私ははじめみたときよく分かりませんでした(^^;

検証ツールで値を0にしてみたり、色々試していたら理解できたという感じです(＞＜)

今日は時間があるので順を追ってここで検証してみましょう＾＾

擬似要素の値を0にしてマージンを消してみる

beforeの値を0にして、margin-rightを消すとこうなります。（afterはそのままです）

        &:before
        {
          right: 0;
        }

少し見にくいですが開始地点は親要素である<span>で囲った最後の文字の「報」で、beforeなので左に線が続いていますね。

ではこれを先ほどのようにright:100%;にしてみます。

        &:before
        {
          right: 100%;
        }

すると、今度は「関」のすぐ左から始まっています。

right:0;の位置から見出しの文字数分左に移動しています。

このことから擬似要素の100％とはその親要素のサイズということが分かりますね。（今回は<span>で囲った見出しの文字数分）

これにマージンをつけることによって余白をあけます！

        &:before
        {
          right: 100%;

          margin-right: 1.7em;
        }

これと同じ事をafterでもすると完成です！

あと、もう一つポイントがあります！

.sectTitのoverflow:hidden;を消してみる

<h3>のクラスである.sectTitにoverflow:hidden;を付けているのはお気づきでしょうか？

これを付け忘れるとinnerを越えて画面幅いっぱいまで広がってしまいます。

（擬似要素のwidhを100vwにしているため）

なのでお忘れなく！！

まとめ

いかがだったでしょうか？

この方法だと文字サイズが増減してもデザインが崩れないのでおすすめです。

では今日はここまで〜〜