如何在不更改文本颜色的情况下更改项目符号列表的背景颜色？

Question

我怎么才能让这个要点列表的背景变成不同的颜色我似乎无法让它工作？我想将它添加到下面的代码中：

<ul>
    <li>&nbsp;2 different sizes (Small &amp; Large).</li>
</ul>

<div>&nbsp;</div>

<ul>
    <li>2 different widths (265mm &amp; 420mm).</li>
</ul>

<div>&nbsp;</div>

<ul>
    <li>4 different head rest mounts.</li>
</ul>

<div>&nbsp;</div>

<ul>
    <li>Orderable replacement pads.</li>
</ul>

Answer 1

这可能对你有帮助..（不确定你为什么有多个 ul 标签）

<ul style="background-color: aliceblue;">
    <li>2 different sizes (Small &amp; Large).</li>
    <li>2 different widths (265mm &amp; 420mm).</li>
    <li>4 different head rest mounts.</li>
    <li>Orderable replacement pads.</li>
</ul>

Answer 2

我以前用 hack like 解决方案做过，我不确定它是否是最好的，但我的想法是：

ul > li {
 position: relative;
}
ul > li:before {
 content: '';
    position: absolute;
    top: 6px;
    left: -18px;
    width: 8px;
    height: 8px;
    background-color: red;
    display: block;
    border-radius: 50%;

}

<ul>
    <li>&nbsp;2 different sizes (Small &amp; Large).</li>
</ul>

Answer 3

您可以将 span 标签添加到 li 标签中，并为 li 和 span 设置不同的样式。其他替代方法请参考下面的link。

https://css-tricks.com/finally-it-will-be-easy-to-change-the-color-of-list-bullets/

li {
  text-align: left;
  margin-bottom: 3%;
  color: green;
}
span {
  color: blue;
}

<ul>
  <li><span>2 different sizes (Small &amp; Large).</span></li>
  <li> <span> 2 different widths (265mm &amp; 420mm). </span></li>

  <li><span>4 different head rest mounts.</span></li>

  <li><span>Orderable replacement pads.</span></li>
</ul>

如何在不更改文本颜色的情况下更改项目符号列表的背景颜色？

How would i change the background colour of a bullet point list without changing the colour of the text?

html

html-email