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

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>

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: "BC0";
}

<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>

Answer 2

如果 bg 是纯背景色，那么框阴影就可以了。

ul { 
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow:  -2em 0 #f5f5f5
}

.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>

如果您需要边框，过滤器可以提供帮助

ul {
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow: -2em 0 #f5f5f5;
  filter: drop-shadow(2px 0) drop-shadow(-2px 0) drop-shadow( 0 2px) drop-shadow(0 -2px)
}

.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>

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

how to change background color of unordered list that includes the bullet

html

css

html-lists