How to COLOR lower-roman ordered list style in html with just css?


Tags: html,css,list,css3,layout

Problem :

Getting something as simple as the example image below to work, proves to be very difficult. My frustration comes from the fact that after all these years, this is still not possible easily with html/css only, which is what I want! I want an ordered list with colored roman-style bullets! And having the text stay neatly put together exactly as the example below. I've tried numerous efforts with fiddle but I can't get it to look as neat as my image below. Any clues how to improve this?

ol{
 counter-reset:item;
 list-style:none;
}
ol li:before{
 content: counter(item, lower-roman) "."; color: #4000ff;
 counter-increment: item;
 position: absolute;
 text-align: right;
 padding-right: 4px;


}ol li{
 text-indent: -20px;
 margin: 4px 0 0 17px;
}

http://jsfiddle.net/MEBxA/89/

PS While I was writing some abcd placeholder text in indesign, suddenly my imagination took off...


enter image description here


Whats needed:

  1. Achieve proper gap between roman letters and li text. SUCCESS!
  2. Add left or right alignment of the roman letters
  3. Have the next-up lines fit neatly aligned. SUCCESS!


Solution :

I hope that I understand correctly. You already got the list-type coloured, so the only problem is the alignment?

Drop the text-indent and left margin on the li and add a negative margin-right to the li:before:

ol li:before{
 content: counter(item, lower-roman) "."; 
 color: #4000ff;
 counter-increment: item;
 position: absolute;
 text-align: right;
 margin-left: -30px;
}
ol li{

 margin: 4px 0 0 0;
}

Updated Fiddle


    CSS Howto..

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to display a border-bottom only if table cells are not empty (CSS)

    how to set height of a 'td' inside a array in javascript using CSS

    How to add padding and border that doesn't change width if using 960 grid system

    How to dynamically allocate block of text using css?

    I would like to have the users change the CSS using an optional panel. How should I do this? [closed]

    how to make animate.css(plugin) work instantly on live site load?

    How to use bootstrap-theme.css with bootstrap 3?

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    How to make a progress bar like this in CSS

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • CSS 'schema' how-to

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to make Superfish menu vertical in first level but horizontal in second level?

    css hover image and show icon not show

    How to align body of the webpage to center?

    How to force resize inside iframe?

    How to use Open Sans font with cakePhp 3?

    How to stop a webpage from loading until all jQuery load functions are complete?

    How best to store and download resource files on the page?

    How do three.js transforms and CSS3 3D-transforms correspond?

    How to restrict character limit by line or # of characters with css?

    how to make an oval in css?

    How to line up the bottom of side-by-side Div layers in CSS

    How to position div which contains font-awesome icons to centre of another div?

    How to make dropdown menu disappear after a certain amount of time JavaScript

    How to get the value of last assigned property in Sass or CSS?

    how to set a table background image

    How to manage length of dashes

    Jquery Mobile — how to Override Height and width of select box.