De kleur van de opsommingstekens van een HTML-lijst wijzigen zonder span te gebruiken

Antwoord 6, autoriteit 3%

Voortbouwend op zowel @Marc- als @jessica-oplossingen – Dit is de oplossing die ik gebruik:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

Ik gebruik emvoor lettergroottes, dus als u uw top-waarde instelt op .5em, wordt deze altijd in het midden geplaatst van uw eerste regel tekst. Ik heb left:-20pxgebruikt omdat dat de standaardpositie van opsommingstekens in browsers is: bovenliggende padding/2

Antwoord 7, autoriteit 2%

::markering

U kunt de ::markerCSS pseudo-element om het markeringsvak van een lijstitem te selecteren (dwz opsommingstekens of cijfers).

ul li::marker {
  color: red;
}

Opmerking:Op het moment dat dit antwoord wordt gepost, wordt dit beschouwd als experimentele technologie en is het alleen geïmplementeerd in Firefox en Safari (tot nu toe).

Antwoord 8

Ik vond het antwoord van Marc ook erg leuk – ik had een set UL’s met verschillende kleuren nodig en het zou natuurlijk gemakkelijker zijn om gewoon een klas te gebruiken. Dit is wat ik bijvoorbeeld voor sinaasappel heb gebruikt:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Bovendien ontdekte ik dat de hexadecimale code die ik gebruikte voor ‘inhoud:’ anders was dan die van Marc (die hexadecimale cirkel leek iets te hoog te zitten). Degene die ik gebruikte lijkt perfect in het midden te zitten. Ik vond ook verschillende andere vormen (vierkanten, driehoeken, cirkels, enz.) hier

Antwoord 9

Voor mij is de beste optie om CSS-pseudo-elementen te gebruiken, dus voor discopsommingstekens zou het er als volgt uitzien:

ul {
  list-style-type: none;
}
li {
  position: relative;
}
li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

li {
  list-style: none;
  position: relative;
}
li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

ul {
  color: red;
}

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>