ドット下線ヘッドライン

サンプル

ドット下線の見出し（ヘッドライン）の作り方について解説します。

コード（Codepen）

コードはこちらから見ることができます。

See the Pen ドット下線のヘッドライン by Shin (@shin-ichi) on CodePen.

解説

【HTML解説】

HTML部分は「サンプル」という文字を<h2>タグで挟んでいます。<h1>タグや<h3>タグでもclass="komidashi"を記述すれば、同様に下線がドットの見出しを作ることができます。

【CSS解説】

.komidashi{
komidashiクラスの記述です。クラスは始めに.（ドット）をつけて記述します。

border-bottom: 2px dotted #ff6347;
2pxの下線をdotted（点線）、#ff6347(オレンジ色)として引きます。

font-size: medium;
フォントサイズをミディアムサイズにします。
}

.komidashi::before{
komidashiの本文の前に文字などを配置する設定です。

content: '◼︎';
◼︎を配置します

color: #ff6347;
◼︎のカラー（オレンジ色）を設定します。
}