• HTMLCSS

CSSで丸のドット下線を作成する方法【間隔・大きさを自由に変更】

CSSで間隔・大きさを自由に変更できる丸のドット下線を作成したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
CSSで丸のドット下線 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

間隔・大きさが違う丸のドット下線がCSSで再現されてます。

実装手順は以下の通りです。

backgroundプロパティを使って丸の下線を作る

.line01 span:after {
    background: radial-gradient(circle farthest-side, #000, #000 60%, transparent 60%, transparent);
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
}

下線を付けたい要素の擬似要素に丸の下線を入れるコード例です。

backgroundプロパティを使います。

radial-gradient関数を使ってグラデーション指定。

上記関数にcircleを指定する事で一定の半径の円を再現できます。

farthest-sideで指定した要素の最も遠い辺をグラデーションの終了位置とします。

円のカラーコード（色）と大きさ（パーセント）を指定。

後はbackground-sizeプロパティも追加して調整すれば、間隔・大きさを自由に変更できる丸ドット下線の完成です。

まとめ

CSSで間隔・大きさを自由に変更できる丸のドット下線を作成する方法について紹介しました。

以上で解説を終わります。