CODEWITHSUNDEEP
htmlcss
John Abraham
John Abraham

Reputation: 18801

Fully filling in the background-color of an ol list-item

LIVE EXAMPLE ON CODEPEN

I would like to have the background-color: papayawhip; on .active connect with the red bar to the left of the . What is the best method in accomplishing this. I would like to maintain the same spacings show in the codepen.

example of what I want to accomplish

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 or less

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;
  }

Upvotes: 1

Views: 174

Answers (1)

simon
simon

Reputation: 16310

How about this for your 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

Upvotes: 3

Related Questions