如何在HTML的<ul>标签中将列表默认符号替换为星号（*）

方法1：::before伪元素实现（全浏览器兼容） #

该方案支持所有主流浏览器（包括IE11），同时支持灵活调整星号的大小、颜色、间距等样式：

• 第一步移除ul默认列表样式与默认缩进
• 第二步通过li的伪元素插入星号作为自定义标记
  代码示例：

<style>
.star-list {
  list-style: none;
  padding-left: 0;
}
.star-list li {
  position: relative;
  padding-left: 1.2em;
  margin: 4px 0;
}
.star-list li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  /* 可自定义星号样式 */
  /* color: #f00; */
  /* font-size: 18px; */
}
</style>

<ul class="star-list">
  <li>Text1</li>
  <li>Text2</li>
  <li>Text3</li>
</ul>

方法2：原生list-style-type实现（写法最简） #

如果不需要兼容低版本浏览器（Chrome 79+、Firefox 68+、Safari 15.4+），可以直接使用CSS原生属性实现，代码更简洁：

.star-list {
  list-style-type: "* ";
  padding-left: 1.2em;
}

星号后追加空格是为了和列表文本保留合适间距，可根据实际需求调整。

内容的提问来源于stack exchange，提问作者TBNRVivo