1

Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.

Is there any way to do this without JS or something? I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.

The code I tried, as you can see in the fiddle:

Relevant HTML

<ol>
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>
</ol>

CSS I have tried (without success)

/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Community
  • 1
  • 1
Arkana
  • 2,831
  • 20
  • 35
  • 4
    Okay, show us the *relevant* (minimal/[SSCCE](http://sscce.org/)) HTML and CSS with which you're working, and clearly illustrate what the end-result should look like. Ideally *also* (but *not* 'instead') offer us a [JS Fiddle](http://jsfiddle.net/), or similar, demo showing your relevant HTML and CSS. Your rep, at the time of writing this comment, is >1.2 thousand; you should, by now, know how to post a question without needing us to *ask* for the basics (such as relevant code). – David Thomas Jan 02 '14 at 17:11
  • @David Thomas Please, read the question carefully. There's a jsFiddle, made by me, in the question, with my attemps, and there's no edit in the question at this time. – Arkana Jan 03 '14 at 07:31
  • @DavidThomas In fact, the community is already using my fiddle to make tests for the answers, have you see? – Arkana Jan 03 '14 at 07:36
  • And yet you haven't bothered to show the code in your question. A demo is a nice bonus, but it does, and should, *not* be considered a replacement for showing us your code here. – David Thomas Jan 03 '14 at 08:59
  • You're right, the code should be in question in case the instance disappear or any other mishap occurs. So there it is. – Arkana Jan 03 '14 at 10:53

3 Answers3

7

Here is a possibility using the counter-reset / counter-increment properties:

ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
    counter-increment:list;
    content:counter(list, lower-alpha) ". ";
    color:red;
}

see fiddle: http://jsfiddle.net/jRVH5/14/

andi
  • 6,442
  • 1
  • 18
  • 43
  • Thanks for teach me about that properties, I don't know these exists (or I forgot it), but is exactly what I want. – Arkana Jan 03 '14 at 07:40
3

For future generations: Newest addition to browsers (FF68+, Ch80+) 

::marker {
   color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

elixon
  • 1,123
  • 12
  • 15
  • I [just found out about this](https://css-tricks.com/finally-it-will-be-easy-to-change-the-color-of-list-bullets/). It's nice to finally be able to specifically target and style the markers. I tested it with `font-family`, `font-weight`, `font-size`... it looks like the most common text styling properties are supported. :-) – Mentalist Mar 30 '22 at 05:22
0

Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.

 li {
     color: green;
 }
span {
    color: black;
}

http://jsfiddle.net/jRVH5/9/

probational
  • 1