CSS リストの前の黒丸をデザインするには？

.list .item
{
  font-size:14px;
  padding: 3px 0 20px 15px!important;
  position:relative
}
.item a
{
  padding: 0;
  color: #595959;
}
.item a:after
{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 0;
  border: 1px solid #595959;
}

.item a:before
{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 2px;
  background: #F00;
}

<div class="ui list">
  <div class="item">
    <a href="#">リストA</a>
  </div>
  <div class="item">
    <a href="#">リストB</a>
  </div>
  <div class="item">
    <a href="#">リストC</a>
  </div>
</div>