CSS之可爱的伪元素::maker详解

点击是会变图案滴，那么这个的做法就得益于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:记得点赞、关注、评论噢，我们下期很快再见🎀