This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

I don’t pay much attention to UL on the web, or use it at all, but today I saw the power of UL, or list-style type. This property can be used by both OL and UL, and is supported by all browsers.

list-style-type

List-style-type sets markers for list elements (such as dots, symbols, or custom counter styles). List-style type has many defaults. A variety of styles can be set. Of course you can set strings,

ul{
list-style-type: "----";
}
Copy the code

This string can also be a Unicode value for an icon:

ul{
list-style-type: "\2708";
}
Copy the code

And, of course, emojis! For example, you use Win +. To wake up Windows emojis.

Ul {list - style - type: "😜 😘 😒 🤦 came ️"; }Copy the code

@counter-style allows you to customize list-style styles. True empowerment!!

@counter-style allows you to set different options, specifically below.

@counter-style <counter-style-name> { [ system: <counter-system>; ]  || [ symbols: <counter-symbols>; ]  || [ additive-symbols: <additive-symbols>; ]  || [ negative: <negative-symbol>; ]  || [ prefix: <prefix>; ]  || [ suffix: <suffix>; ]  || [ range: <range>; ]  || [ pad: <padding>; ]  || [ speak-as: <speak-as>; ]  || [ fallback: <counter-style-name>; ] }Copy the code

Example 1: symbol + suffix

@counter-style countstyle { system: cyclic; Symbols: "😜 😘 😒"; suffix: "-"; } ul { list-style: countstyle; }Copy the code

Example 2: Scope

This is what I’m using right now. The company has several sets of data: a certain set of data is preceded by a certain symbol, because it was done by VUE, initially using V-if. Later found this usage through Google, it is true to use oh.

@counter-style countstyle { system: cyclic; Symbols: "😜 😘 😒"; suffix: "-"; range:2 3; } ul { list-style: countstyle; }Copy the code

A 1 is the fallback that triggered it

::maker

The title of the title is two ways, and if you don’t see it here, you’ll think I’m confused, but it’s not. This property is also what I saw when I learned list-style type.

MDN

::marker CSS pseudo-element Selects a marker box of a list item, which usually contains a bullet or number. It works on any setting with display: On elements or pseudo-elements of a list-item, For example] (https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li) and [and] (HTTP: / / https://developer.mozilla.org/zh-CN/docs/Web/HTML/ Element/summary) and [.

Maker supports font Properties Color, Text-Combine – Upright, Unicode-bidi, Directionand Content.

Ul Li: nth-Child (1)::marker {content: "🍔🍟🍗"; font-size: 20px; } ul li:nth-child(2)::marker { content: "\2708"; font-size: 20px; color:orchid; } ul li:nth-child(3)::marker { content: "----"; font-size: 20px; color: aqua; }Copy the code

Note that this is a pseudo-element that applies to Li.