How would i make the background of this bullet point list a different colour i can't seem to get it to work? I want to add it to the code below:

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

CodePudding user response：

This might help you.. (Not sure why you have multiple ul tags)

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

CodePudding user response：

You can add a span tag to your li tag and style the li and the span differently. For other alternative ways please refer to the link below.

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>

CodePudding user response：

i've done it before with hack like solution, i'm not sure if it's the best one or not but here is the idea:

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>