[Pure CSS] ul li prefix points (dots, square points, etc.) add color and change color (no background image)

Background: How to add dots before li and trigger :hover to change color, the schematic diagram is as follows:

1. Code

HTML:

<ul>
    <li><a href="#">纯CSS ul li前点加颜色和变色(不使用背景图)</a></li>
    <li><a href="#">纯CSS ul li前点加颜色和变色(不使用背景图)</a></li>
</ul>

CSS:

.ul li{list-style-type: square;color: #0099ff;font-size: 16px;line-height: 30px;}
.ul li a{color: #333;font-size: 14px;}
.ul li:hover{color: #ff6900;}
.ul li:hover a{color: #ff6900}

Two, analysis

The first line of code:
list-style-type: square; is to add a prefix square point, what if you want to add a round point? What about adding a hollow circle, or adding 1 2 3 Arabic numerals?

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | iroha | katakana | katakana-iroha | lower-latin | upper-latin
value:
disc : CSS1 default value. Solid circle
circle : CSS1 Hollow circle
square : CSS1 Solid square
decimal : CSS1 Arabic numeral
lower-roman : CSS1 Lowercase Roman numeral
upper-roman : CSS1 Uppercase Roman numeral
lower-alpha : CSS1 Lowercase English letter
upper-alpha : CSS1 Uppercase English letter
none : CSS1 does not use bullets
color: #0099ff; It is the color added to li, and the prefix point will be changed in color.
font-size: is the size of li
line-height is the row height

The second line:
.ul li a{color: #333;font-size: 14px;} is assigned to the a tag within li, including color and font size, but it has nothing to do with the prefix point of li, it only works on a text inside the tag

The third line:
.ul li:hover{color: #ff6900;} is to trigger the li value to change the color, including the prefix point

The fourth line:
.ul li:hover a{color: #ff6900} After li triggers :hover, it will change the color of the article in the a tag alone!