【CSS】テキストの左右いっぱいにラインを引く方法

見出しなどのテキストの両端にラインを入れる方法です。
以前は、spanなどを入れ子にして実装していましたが、疑似要素をflexboxで配置することで、簡単に実装できます。

実装サンプル

HTML

<h2>Topics</h2>

 

CSS

h2 {
  color: #545454;
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

h2::before,
h2::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: #545454;
}

h2::before {
  margin-right: 20px;
}

h2::after {
  margin-left: 20px;
}

flex-growプロパティを使用して、h2の左右の余白を、（flex-grow: 1の指定）1：1の比率で分配します。

 

ちなみに、両端いっぱいにしない場合

両端いっぱいにせず、ラインの横幅が決まっている場合は、中央寄せにし、横幅のサイズを指定するだけです。
（※flex-growの指定は外します）

CSS

h2 {
  color: #545454;
  display: flex;
  align-items: center;
  justify-content: center;
  /*中央寄せにする*/
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

h2::before,
h2::after {
  content: "";
  height: 1px;
  width: 100px;
  /*左右のラインの横幅を指定*/
  background-color: #545454;
}

h2::before {
  margin-right: 20px;
}

h2::after {
  margin-left: 20px;
}

 
 

• WEB
• Tips
• 技術情報