【HTML/CSS】テキストの左右にボーダーを設定する方法

Image

CSSで見出しや段落テキストの左右にボーダーを設定する方法のご紹介です。

見出しやタイトルテキストの左右にボーダーが表示されているデザインは、サイトを閲覧しているとよく見かけるデザインになります。実際には、下記のような表示となります。

See the Pen
Border Left Right Text 1 | CSS
by ryoy (@intotheprogram)
on CodePen.

本記事の内容

  • テキストの左右に単色のボーダーを設定する

では、解説していきます。

テキストの左右に単色のボーダーを設定する

テキストの左右に単色のボーダーを設定する方法になります。HTMLはシンプルに必要なタグのみを記述します。

HTML

<h1>Border</h1>

CSS

続いてCSSを記述します。

h1 {
  display: flex;
  align-items: center;
}

h1:before,
h1:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
}

h1:before{
  margin: 0 20px 0 0;
}

h1:after{
  margin: 0 0 0 20px;
}

各行について詳しく解説していきます。

CSS(1~4行目)

h1 {
  display: flex;
  align-items: center;
}

h1をflexコンテナに指定して、内部のflexアイテムを横並びにします。align-itemsで縦方向の位置を中央に揃えています。

CSS(6~12行目)

h1:before,
h1:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
}

h1の疑似要素にボーダーのスタイルを設定しています。ボーダーの幅(高さ)は「height: 2px」の値を増やすことで太くなります。

CSS(14~16行目)

h1:before{
  margin: 0 20px 0 0;
}

表示されているテキストから見て、左側のボーダーとテキストのマージンを指定しています。

CSS(18~20行目)

h1:before{
  margin: 0 20px 0 0;
}

表示されているテキストから見て、右側のボーダーとテキストのマージンを指定しています。

以上、見出しテキストの左右にボーダーを設定するのご紹介でした!

SHARE