26 February 2026

How can i use a special character as the HTML list item marker?

HTML 

<ul class="special-bullets">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>


CSS

.special-bullets {
  list-style-type: none;      /* remove default bullet */
  padding-left: 1.4em;        /* adjust indent as needed */
}

.special-bullets li::marker {
  content: "★ ";              /* ← your special character + space */
  /* content: "✔ "; */
  /* content: "➜ "; */
  /* content: "🚀 "; */        /* emoji also works */
  color: #e91e63;             /* optional: color the marker */
  font-size: 1.1em;           /* optional: size */

 

You can also style the number in the same way:

ol.fancy-numbers li::marker {
  content: counter(list-item) ". ";   /* default is "1. " */
  color: navy;
  font-weight: bold;

 

No comments:

Post a Comment