Jørgen Jørgen - 15 days ago 5
CSS Question

New list items shadowing previous items due to negative margin

I'm working on a step indicator which I implemented as a list:

<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li>Step 3</li>
</ol>


Each list element has a rounded edge to it's right in order to indicate progress, so I have the following CSS:

li{
display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px;
float: left;
margin: 0 0 0 -20px;
border-radius: 0 15px 15px 0;
}


My problem is that later elements are shadowing the earlier, thus the rounded edge are hidden. I've tried to set a decreasing z-index for each element, but it doesn't work (besides I couldn't use this solution anyway). I acheive the desired presentation by changing to
float:right
but that renders the list items in descending order...

Check this jsfiddle for details: http://jsfiddle.net/fMRbr/

Answer

You can use the :before

li{
    display: inline-block;
    width: 33%;
    margin: 0 0 0 -20px;
    border: 1px solid #ddd;
    border-radius: 0 15px 15px 0;
    background-color: white;
    text-indent: 40px;
    
    position: relative;
}

li.active{
 background-color: red;   
}

li:before{
    content: '';
    width: 15px;
    height: 19px;
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-width: 0 1px 1px 0;
    border-radius: 0 15px 15px 0;
    position: absolute;
    top: 0;
    left: -3px;
}

li.afteractive:before {
    content: '';
    width: 15px;
    height: 19px;
    display: inline-block;
    background: #f00;
    border: 0;
    border-radius: 0 15px 15px 0;
    position: absolute;
    top: 0;
    left: -3px;
}
<ol>
  <li class="active">Step 1</li>
  <li class="afteractive">Step 2</li>
  <li>Step 3</li>
</ol>

<br /><br />

<ol>
  <li>Step 1</li>
  <li class="active">Step 2</li>
  <li class="afteractive">Step 3</li>
</ol>

<br /><br />

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li class="active">Step 3</li>
</ol>

Comments