Technology

[CSS]タイトルより短い下線を表示させる

タイトルより短い下線を表示させるための備忘録。

こちらの記事を参考にした。

このABOUTの下のボーダーラインを作成する。

HTMLの用意

HTMLはシンプルに<H1>と<p>を用意する。

<div class="contents-wrapper">
    <div class="container">
      <H1>ABOUT</H1>
      <p>文章文章。</p>
      <p>文章文章。</p>
    </div>
  </div>

CSSの用意

beforeを使って表示させる。

.contents-wrapper h1{
  display: inline-block;
  position: relative;
}


h1:before {
 display: inline-block;
 position: absolute;
 content: '';
  bottom: -10px; /*下線の上下の位置*/
  left: 50%;
  width: 30px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置の調整*/
  background-color: #666666; /*下線の色*/
}

-Technology