Alignment issue of HTML ordered list number counter: How to place the numbers over fixed background boxes?

user_509670 0
Viewed 34

Given an ordered html list that I'm trying to layout as simple and as clean as possible.
The HTML cannot be changed or touched. Only CSS can be changed. I have only trouble getting the (roman) numbers placed over the yellow boxes:

enter image description here

How can I keep the layout exactly the way it is now, but show the (roman) numbers over (not perse into) the yellow background boxes?

enter image description here

The letters should be centered over the boxes. I want the boxes to have a fixed with, regardless of how long the (roman) numbers might get. They will often stay below iii anyways. If they ever get larger like iv, vii, or xii or 200 then its okay if they just "over-flow" over the box with, where some of the text will then have no background. No biggie. That I can live with, especially since I can always widen the width of the boxes.

enter image description here

I want the left alignment of all texts to be perfectly at the same spot, regardless of how short the word or how long the paragraphs get:

enter image description here

I have prepared a code snippet that shows the exact problem.
Any help is appreciated. Thank you!

html {margin: 40px}
body {margin: 0 auto;}
article{background: #EEE;  padding: 0em;}

ol {
  list-style-type: none; 
  counter-reset: section;
  counter-increment: step-counter
   }

ol li{
    border-bottom: 2px solid #CCC;
    text-indent: -1em;
}

ol li:before {
    counter-increment: section;
    content: counter(section, lower-roman);
    margin: 0 .25em 0 0px;
    padding: 0px 0px;
    width: .75em;
    display: inline-block;
    background: yellow;
    color: blue;
}
<article>
Short Ordered List

<ol>
<li>First word</li>
<li>Second word</li>
<li>Third word</li>
</ol>


Paragraph Ordered List

<ol>
<li>Longer paragraph texts to test the indentation alignment for first and following lines of text. Longer paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.</li>
<li>Another paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph following lines of text.</li>
<li>Final long aragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.Longer paragraph texts to test the indentation alignment for first and following lines of text.</li>
</ol>
</article>

html-lists layout list css html
1 Answers

Still testing, but this appears to work and solve it:

Remove:

 ol li {text-indent: -1em;}

Add:

ol li:before {
width: 1em;
position: absolute;
text-align: center;
margin-left: -1.5em;
}
user_5096700
Related