Written by Kasumi

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で間隔・大きさを自由に変更できる丸のドット下線を作成する方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
15221
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
5499
HTMLCSS

CSSで全ての同一要素に同じプロパティを適用する方法

2023.04.28
672
HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
1721