li 元素列表样式改为正方形方块

在 CSS 中，可以通过设置 list-style-type 属性来改变列表项 <li> 前面的标记样式。如果想要将列表项前面的点（默认是圆点）改为正方形，可以使用以下 CSS 代码：

li {
  list-style-type: square;
}

如果希望 <li> 前面的方块，大一点，需要做如下调整：

.my-list li {
  list-style-type: none; /* 移除默认的列表标记 */
  position: relative; /* 使伪元素能够相对于列表项定位 */
  padding-left: 20px; /* 为自定义标记留出空间 */
}

.my-list li::before {
  content: ''; /* 伪元素的内容为空 */
  position: absolute;
  left: 0; /* 定位到列表项的左侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中调整 */
  width: 10px; /* 自定义标记的宽度 */
  height: 10px; /* 自定义标记的高度 */
  background-color: black; /* 自定义标记的颜色 */
}

对应的 HTML 代码片段：

<ul class="my-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

li 元素列表样式改为正方形方块

CSS li 扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论