【CSS】見出しにカギ括弧を付ける

2025年1月28日

今回は見出しにカギ括弧を付ける方法を何パターンかご紹介します！

というわけで今回は、見出しにカギ括弧を付ける方法についてご紹介します。

見出しにカギ括弧を付ける

今回は疑似要素を使ってカギ括弧を付けていきます。

See the Pen 見出しにカギ括弧を付ける by そす (@Sosgoyo) on CodePen.

カギ括弧の長さは、疑似要素自体に長さと高さを指定して設定します。

【CSS】

h2::before,
h2::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
}

h2::before {
    border-left: solid 3px red;
    border-top: solid 3px red;
    top: 0;
    left: 0;
}

h2::after {
    border-right: solid 3px red;
    border-bottom: solid 3px red;
    bottom: 0;
    right: 0;
}

ここではwidthとheightにそれぞれ30pxを当てております。

あとは、borderを使用して線を出したい方向に線の種類、太さ、色を指定すればOKです。
ここでは、「実線」「3px」「赤色（red）」にしております。