ウェブサイト制作

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