使用伪元素时防止链接超出

Question

也许我不能选择一个解释性标题，但让我解释一下我想达到的目标，我想在链接之前使用伪元素，但是当链接的尾部比其父级长时，链接的尾部从零开始。我想链接从伪元素的空白开始。

不是这样的 enter image description here

我尝试如下创建 enter image description here

fiddle

HTML

<div class="parent"><ul><li>
<a href="#">Post typografy</a>
</li>
<li>
<a href="#">Post Prefix: Audio Music</a>
</li>
<li>
<a href="#">Post Prefix: Mauris dolor justo, tincidunt</a>
</li>
<li>
<a href="#">Post Prefix: Maecenas laoreet interdum turpis</a>
</li>
</ul>
</div>  

CSS

.parent {width: 250px;}
.parent li {list-style: none;}
.parent li:before {
  font-family: 'WebSymbolsRegular';
  display: inline-block;
  font-size: .857em;
  margin-right: .618em;
  font-weight: normal;
  color: #dedede;   
  vertical-align: text-bottom;
  display: inline-block;
  width: 3px;
  height: 15px;
  background: #ccc;
  content: "";
  position:relative;

}