css 定制彩色子弹

Posted 2021-05-13

/* First supress the list style */
ul { list-style: none; }

/*  Then generate your own bullets */
li::before { content: "•"; color: red }

/* The above code inserts a red bullet, but placement needs to be adjusted One way to do that is to make our bullet into an 'inline-block' of a given size, say 1em, and then move it to the left by its own size:  */
li::before {
  content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em;
}

/*  B.t.w., if you have trouble typing those bullets into your style sheets, you can also use their Unicode numbers: • = "\2022", ◦ = \25E6" and ▪ = "\25AA" */