UserCSS:箇条書きのビュレットに絵文字を使う
元ネタ
元記事では、記号を使っていますが、絵文字も普通に使えます。 1
2
3
4
5
6
笑顔
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
content: '🙂'; /* */
font-size: 16px;
}
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
content: '😃'; /* */
font-size: 20px;
}
.line .indent-mark .c-1 + .dot::before {
content: '😄'; /* */
font-size: 20px;
}
.line .indent-mark .c-2 + .dot::before {
content: '😆'; /* */
font-size: 18px;
}
.line .indent-mark .c-3 + .dot::before {
content: '🤣'; /* */
font-size: 18px;
}
.line .indent-mark .c-4 + .dot::before {
content: '😂'; /* */
font-size: 16px;
}
番号付きリストのバレットを表示させるUserCSS code:style.css
.line.number-list .dot {
display: block !important;
/* display: list-item !important;*/
/* display: none; */
}
https://img.shields.io/badge/UserCSS-箇条書きのビュレットに絵文字を使う-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon