CSSのpositionを使ってリストの丸アイコンを作成する方法

今回は、「CSSのpositionを使ってリストの丸アイコンを作成する方法」について紹介します。

コーディング初心者の方でも簡単に出来るので、是非参考にしてください!

CSSのpositionを使ってリストの丸アイコンを作成する方法

完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

positionプロパティを使って丸アイコンを作成しました。

positionプロパティを使って丸アイコンを作成することで、テキストの行頭が簡単に揃うので便利です!

それでは早速コーディングしていきましょう。

HTML

ulタグの中に、liタグを3つ用意しました。

CSS

 

まずはliタグに対して「position: relative;」を指定します。

そしてliタグのbefore(擬似要素)に対して「position: absolute;」を指定します。

さらに「content: “”;」を使って、擬似要素で丸アイコンを作成していきます。

あとはサイズと色や配置をお好みで指定したら完了です!

まとめ

以上が、CSSpositionを使ってリストの丸アイコンを作成する方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事