CSSだけでリストマークを付ける。

2020年10月10日

リストじゃないものにもCSSだけでリストマークを付けれないのかなっと思ったので実装してみた。

ul liには自動でリストマークが付きますが、これをもっと自由にデザインしたいなと思いました。
さらにたまにul liじゃないものにもリストマークを付けたい場合がありますよね?
こんな場合です。

beforeのような疑似要素を使って実装することが出来ましたのでここに記しておきます。
早速コードです。

HTML

<h1>厳しい品質管理</h1>

CSS

h1 {
font-size: 20px;
}
h1:before {
content: "";
width: 16px;
height: 16px;
display: inline-block;
background-color: #66a2c0;
border-radius: 50%;
margin-right: 10px;
}

このコードで実装できました。

HTML/CSS

Posted by bistro