点击是会变图案滴，那么这个的做法就得益于CSS 伪元素 ::marker
就像这个大家一定熟悉：
<ul>
<li>Contagious</li>
<li>Stages</li>
<li>Pages</li>
<li>Courageous</li>
<li>Shaymus</li>
<li>Faceless</li>
</ul>
效果：
利用::maker其实也就是将上面的小圆圈进行了改造和变化而已，做法也非常非常简单：
li {
padding-left: 12px;
cursor: pointer;
color: #5555ff;
}
li::marker {
content: '**';
}
| ::maker元素它只能够响应list item，最常见的就是ul里的li，ol里面的li 🧐对于其他的元素如果想要使用这个元素的话呢，可以:y:list-item的元素使用::maker伪元素，注明一下就好，我们也可以对这个伪元素的一些样式进行调整，目前来说的话不是任何样式都可以使用，目前能够使用的有： |
all font properties—所有字体属性相关
color----颜色
the content property – content 内容，类似于 ::before 伪元素 的 content，用于填充序号内容
text-combine-upright (en-US), unicode-bidi and direction properties – 文档书写方向相关
| 从最上面那张图可以看出，也可以放小表情上去，并且它是动态的，可以看到表情的变化🤩 |
以下是代码：
HTML:
<ul>
<li>Contagious</li>
<li>Stages</li>
<li>Pages</li>
<li>Courageous</li>
<li>Shaymus</li>
<li>Faceless</li>
</ul>
<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>
CSS:
ul li::marker {
content: '😎';
}
ul li:hover::marker {
content: '😁';
}
html, body {
width:100%;
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
font-size: 20px;
font-family: 'McLaren', sans-serif;
}
ul {
text-align: left;
margin: auto;
line-height: 2;
}
li {
padding-left: 12px;
cursor: pointer;
color: #000;
transition: .2s all;
}
li:hover {
color: #ff6000;
}
li::marker {
content: '>';
}
h1 {
display: list-item;
color: #000;
margin: auto;
padding-left: 8px;
line-height: 40px;
font-size: 20px;
}
h1::marker {
content: '▍';
color: #ff5722;
font-size: 16px;
}
h1:nth-child(3)::marker {
content: '😅';
color: #ff5722;
font-size: 16px;
}
p {
width: 400px;
margin: auto;
}
今天的分享就到这里结束啦，欢迎订阅频道呀😁
ppp:记得点赞、关注、评论噢，我们下期很快再见🎀