html - 如何更改包含项目符号的无序列表的背景颜色

Question

我想为无序列表的背景着色，使项目符号也具有该背景颜色。现在，文本具有背景颜色，但项目符号似乎漂浮在其左侧。我不想指定list-style-position: inside;，因为我希望文本排列在项目符号的右侧。这是我的代码：

ul {
  /*list-style-position: outside;*/
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>

标签： htmlcsshtml-lists

Answer 1

您可以使用::before选择器，它将我们的“假”子弹定位在背景之上。此外，如果你想摆脱左边的间隙，你可以添加margin: 0; padding: 0;到你的ul元素中。

ul {
  /*list-style-position: outside;*/
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
  list-style: none;
}
.gray-bg p {
  display: inline-block;
  margin-left: 20px;
}

.gray-bg::before {
  content: "\2BC0";
}

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>

  <li class="gray-bg">
    <p>Line 2</p>
  </li>

  <li class="gray-bg">
    <p>Line 3</p>
  </li>

  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>