完全填充ol列表项的背景颜色

Question

LIVE EXAMPLE ON CODEPEN

我希望background-color: papayawhip; .active连接到左边的红色栏。实现这一目标的最佳方法是什么？我想在codepen中保持相同的间距。

HTML

<ol class="meny-control"> 
  <li class="active"><a href="">Potential Apparel</a></li>
  <li><a href="">Facebook + Pillow</a></li>
  <li><a href="">Skatelocal.ly</a></li>
  <li><a href="">Cooking.is</a></li>
  <li><a href="">Foodsters</a></li>
</ol>

SCSS或更少

li
  {
      padding: 10px 0;
      margin: 10px 0;
      color: #ccc;
      a
        {
          color: #ccc;
          text-decoration: none;
        }
  }

.active
  {
    position:relative;
    background-color: papayawhip;
    color: #333;

    &:before
      {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -64px;
        width: 5px;
        background: #f26645;        
      }

    a
      {
        color: #333;   
      }

  }


ol
  {
    list-style-type: decimal-leading-zero;
    padding-left: 64px;
  }

Answer 1

对于你的scss / less来说这是怎么回事：

li
  {
      padding: 10px 0;
      margin: 10px 0;
      color: #ccc;
      padding-left: 32px;
      border-left: 5px solid transparent;
      a
        {
          color: #ccc;
          text-decoration: none;
        }
  }

.active
  {
    position:relative;
    background-color: papayawhip;
    color: #333;
    border-left: 5px solid #f26645;
    a
      {
        color: #333;   
      }

  }


ol
  {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;
  }

http://codepen.io/anon/pen/oLgqJ