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

HTMLタグのデフォルトCSSを指定したタグだけ全て無効にする方法【allプロパティを使おう】

2023.01.12
567
HTMLCSS プログラミング

Animate.cssでアニメーション表示を遅延(delay)させる方法

2022.04.29
3292
HTMLCSS プログラミング

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

2022.03.27
10296
HTMLCSS

CSSでテキストにグラデーションをかける方法(便利なジェネレーターも紹介)

2022.07.03
3040