CSSでテキストの左右に線を入れる方法

CSSでテキストの左右に線を入れる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSSだけで、テキストの左右に線を入れる方法をご紹介いたします。以下のような感じで、テキストの両サイドに水平に線を入れることができます。

テキストの左右に線

スポンサードリンク

CSSでテキストの左右に線を入れる方法

例として、h2要素に線を入れてみます。

h2 {
font-size: 20px;
display: flex;
align-items: center;
}
h2::before,
h2::after {
content: "";
flex-grow: 1;
height: 1px;
background: #333;
display: block;
}
h2::before {
margin-right: 15px;
}
h2::after {
margin-left: 15px;
}

このようにスタイルを指定することで、h2の左右に線が入ります。「h2::before,h2::after」で指定されている”height”で線の太さ、”background”で線の色を変更できます。

“height”と”background”を使わずに、borderプロパティを使うことで、点線や破線にすることもできます。

h2 {
font-size: 20px;
display: flex;
align-items: center;
}
h2::before,
h2::after {
content: "";
flex-grow: 1;
border-top: dashed 3px #333;
display: block;
}
h2::before {
margin-right: 15px;
}
h2::after {
margin-left: 15px;
}

「border-top: dashed 3px #333;」の部分で線の種類・太さ・カラーを指定します。

テキストの左右に破線を入れる

あとがき

CSSのみで簡単にテキストの左右に線を入れることができますね。

見出しやワンポイントで活用できるので、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。