:marker の使い方
2025年11月6日

11月に入り日にちが経っていきますね。
そろそろ寒さの季節。
朝起きると外の景色は真っ暗。
しかも、寒い…
風邪ひかんように体調管理をしっかりしとかないとだめだなぁと感じました。
インフルエンザも蔓延してるみたいなんですが…
感染しないように気を付けてください。
さてと、話題を取り戻して…
:marker の使い方
Webページに「リスト」を使うことはありますよね。
「・(中黒)」にしたいときありますよね。
デフォルトでは「●」が妙にでかい時がありますよね。
こちらではいつも、「list-style-type:none」に設定して、「:before(疑似要素)」を設定していました。
でも、解決する方法をネットでググらず、この流れで進めていましたが…
最近、ネットで「AI 機能」が普及していく中、遊び心であれこれのコメントを入れました。
「AI 機能」で間違った情報や解答が返ってきてますが…
「ul li リストのデザインを疑似要素を使わないでデザインする方法を教えてください」
と質問を投げたところ、「:marker」という言葉が出てきました。
使えるようになったのは2019年ぐらいのころでした。
使い方は意外と簡単!
ご参考までに!
ul li:marker{
content: '・';
}
「content」の要素の中に入れるだけでOK!
便利な技術の時代が来るとは思いませんでした。
では、また!






