CSS 列表模型之 marker 标记

本文次要对 ::master 伪元素、list-item下的 list-style-image、list-style-type 款式属性进行介绍，并介绍了在理论中如何应用。list-item下还有其余不罕用的款式属性这里不做介绍。感兴趣的能够自行移步 CSS 规范文档

::marker 是什么

::marker是一个标记伪元素，可能定义内容填充在 list-item 上代表列表项的标记，先附上一个例子，就能很分明地看出它的作用。

<style>
li::marker {content: "(" counter(list-item) ")"; }
li {display: list-item;}
</style>

<ul>
  <li>zhaodao88.com 找商机 </li>
  <li>zhaodao88.com 找人脉 </li>
  <li>zhaodao88.com 找洽购 </li>
</ul>

效果图：

在这里，marker为元素定义的是每一项列表项后面的标记符，在伪元素内的 content 的内容就是要在列表项后面所填充的内容。

应用 ::marker 填充标记内容

须要留神的是，一般元素要想应用 marker，必须将元素定义成display: list-item，list-items 在创立的时候会主动生成 marker 和counter。

标记的款式能够应用 list-style-type 和 list-style-image属性或者间接应用 ::marker 伪元素进行款式编写。上面展现一个例子。

• 用 ::marker 伪元素对标记进行管制，伪元素内 content 的内容就是标记符的内容

<style>
  p {margin-left: 12 em;}
  p.note {
    display: list-item;
    counter-increment: note-counter;
  }
  p.note::marker {content: "Note" counter(note-counter) ":";
    color: blue;
    font-weight: bold;
  }
</style>
<p>zhaodao88.com 找商机 </p>
<p class="note">zhaodao88.com 找洽购 </p>
<p>zhaodao88.com 找人脉 </p>

成果如图:

当然也能够为标记设置字体款式、色彩等属性，相似下面成果li::marker {color: blue; font-weight:bold;}

值得注意的是：目前只有以下属性可能作用于 marker 伪元素上

• 所有的字体款式：font相干
• white-space属性
• color属性
• text-combine-upright, unicode-bidi, direction属性
• content属性
• 所有的 animation 和transition属性

有 issue 提出，在标记应用 white-space: pre 可能不会有很好的成果，能够尝试 text-space-collapse: preserve-spaces 和text-space-trim: discard-after一起应用，更能达到想要的成果，感兴趣的请移步 issue 4448和issue 4891

应用 list-style-image 图像填充标记内容

指定标记图像，当列表项内容失常时，用指定图像填充列表项的标记。

list-style-image 失常取值 <image> | none，未定义状况下是 none，作用在列表项 list-items 下。其中 <image> 用于指定标记图像的url。参考链接移步

上面是应用例子，将会为 <li> 标签的标记块填充上指定链接的 ellipse.png 图像

li {list-style-image: url("http://www.example.com/ellipse.png") }

应用 list-style-type 文本类型填充标记内容

指定标记字符串，当列表项内容失常时，用指定字符串填充列表项的标记。

list-style-type 失常取值 <counter-style> | <string> | none，未定义状况下是 disc(圆形标记符)，作用在列表项 list-items 下。参考链接移步

<counter-style>是 CSS 定义的计数器款式，容许开发者自定义 counter 的款式。比方：

@counter-style thumbs {
 system: cyclic;
 symbols: "\1F44D";
 suffix: " ";
}

ul {list-style-type: thumbs;}

具体 <counter-style> 定义规定参考

上面是对于 list-style-type 的应用例子 ( 如果作用元素不是列表元素，则元素的 display 必须设置为 list-item)

ul {list-style-type: "★";} // 应用 "★" 作为标记符

p.note { // 如果作用元素不是列表元素，则元素的 display 必须设置为 list-item
  display: list-item;
  list-style-type: "Note:";
  list-style-position: inside;
}

ol {list-style-type: upper-roman;} // 定义为罗马数字的大写模式

ul {list-style-type: symbols(cyclic '○' '●'); } // 标记符在 '○' 和 '●' 之间切换

ul {list-style-type: none;} // 不显示标记

留神

::marker伪元素标记不是所有浏览器都反对，包含 chrome 也只是在 80 以上版本通过启用 experimental Web Platform 才反对，如果你想要测试成果，请返回 chrome://flags 启用experimental Web Platform。并不举荐在理论我的项目去应用这条规定，更举荐应用惯例的做法去设置标记块款式。

总结

列表在前端我的项目中很常见，利用场景也非常宽泛。集体感觉，::marker伪元素是对 list-style-image 和list-style-text的补充，三者都是定义标记块的填充内容，image重视图像，text重视字符串，::marker则能够定 font、color 等款式，各具特色。

参考

https://www.w3.org/TR/2020/WD…

https://developer.mozilla.org…::marker