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

2019年8月21日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;
}

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