Bootstrap sidebar collapse menu :after

Question

I made a collapse menu with Bootstrap, works fine, but I can't make it so the link has the same color as the button:

.collapse-link a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  color: $white;
  background-color: black;
}

.collapse-link a.collapsed:after {
  content: "\e080";
  background-color: white;
}

I would like the class="collapse-link" get the same background color as right now in the buttons in the right, so the full div will be following the buttons color when is collapse and when is not, right now just the buttons getting background color i would like the titles: test3 and test get the background color of the buttons beside.

jsfiddle: http://jsfiddle.net/Wc4xt/4377/

HTML:

<div class="sidebar">
  <div class="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li>
        <i class="pull-left fa-lg fa fa-book" aria-hidden="true"></i>
        <div class="collapse-link">
          <a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">test3
          </a>
        </div>
        <div class="collapse in collapse-styled" id="collapseExample1">
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="#">test List</a>
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="#">Create</a>
        </div>
      </li>
      <li>
        <i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
        <div class="collapse-link">
          <a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">test
          </a>
        </div>
        <div class="collapse in collapse-styled" id="collapseExample">
          <i class="pull-left fa fa-lg fa-list" aria-hidden="true"></i>
          <a href="">link List</a>
          <i class="pull-left fa  fa-lg fa-list" aria-hidden="true"></i>
          <a href="">test</a>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS:

.sidebar-wrapper {
  height: 100%;
  overflow-y: auto;
  background: #2f3f4d;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidebar-nav li {
  text-indent: 22px;
  line-height: 60px;
  border-bottom: 1px solid #455b6f;
}

.sidebar-nav li a {
  display: block;
  height: 65px;
}

.collapse-link a:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  color: $white;
  background-color: black;
}

.collapse-link a.collapsed:after {
  content: "\e080";
  background-color: white;
}

Answer 1

Add following css to make it work:

.collapse-link a.collapsed {  
  color: white;
}

a {
  text-decoration:none;
}

ul li {
  list-style:none;
}

Also check: http://jsfiddle.net/mayankN/Wc4xt/4381/