时间戳

首页 > 解决方案 > 如何在列表中为 ::marker 添加 CSS 背景？

html - 如何在列表中为 ::marker 添加 CSS 背景？

问题描述

我有一个类似这样结构的 HTML 有序列表。

<ol>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
</ol>

我想添加背景颜色来列出数字 1、2、3。我发现::marker选择器在 CSS 中可用。但是，我可以使用这个::marker选择器来改变字体的颜色，但是我无法改变背景颜色。

.myclass::marker {
  color: red;
}

background-color 属性似乎在::marker选择器中不起作用。有什么解决办法吗？

编辑：

我正在寻找与此编号背景类似的设计

标签： htmlcss

解决方案

伪元素标记的作用类似于内联文本元素，不支持属性背景。但是，您可以为另一个伪元素应用背景，例如 ::before。如果您添加其他一些属性，它将起作用：内容、宽度、高度、显示。

.myclass {
    position: relative;
}
.myclass::before {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    top: 5px;
    left: 5px;
    background: green;
}

推荐阅读