[CSS]見出しの下線デザインでタイトルより短い下線を表示させる

HTMLサイトの見出しの下線デザインで、CSSを使ってタイトルより短い下線を表示させる方法を説明する。

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

underline design on css

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; /下線の色/
}`