Как разместить знак в конце елемента списка?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.list { 
  max-width: 300px; 
  border: 1px solid #ccc; 
  background: #fff; 
} 
 
.list li+li { 
  border-top: 1px solid #ccc; 
} 
 
.list a { 
  display: block; 
  padding: 10px 35px 10px 15px; 
  position: relative; 
  color: #000; 
  text-decoration: none; 
} 
 
.list a:before { 
  content: 'i'; 
  position: absolute; 
  top: 50%; 
  right: 10px; 
  width: 20px; 
  height: 20px; 
  line-height: 20px; 
  text-align: center; 
  border: 1px solid #ccc; 
  margin-top: -10px; 
} 
 
.list a:hover { 
  color: #f00; 
}

<ul class="list"> 
  <li><a href="#">List text</a></li> 
  <li><a href="#">List text</a></li> 
  <li><a href="#">List text text text text text text text text text</a></li> 
  <li><a href="#">List text</a></li> 
</ul>