html - アイコンは左側に間隔があり、テキストに応じて境界線が表示されます

Question

私がこのように使用する場合：

a{
background: url('path') no-repeat left center;
padding-left: 50px;
border-bottom: 2px dashed;
}

これは次のように生成されます：

しかし、これを使用margin-left: 50px;すると、次のようになります。

どうすればこのようにできますか：

Answer 1

HTMLは次のようにする必要があります

<a href="#"><span>some text</span></a>

リンクとテキストを別々にスタイルできます

a{
  background: url('path') no-repeat left center;
  padding-left: 50px;
}
a span {
  border-bottom: 2px dashed;
}

Answer 2

を使用:beforeして、境界線の下部を削除します。このようなもの：

a {
  padding-left: 40px;
  display: inline-block; 
  position: relative; 
  border-bottom: 2px dashed;
}

  a::before {
    content: "";
    width: 40px; height: 100%;
    background: url('path') no-repeat left center;
    display: inline-block;
    border: none;
    position: absolute;
    top: 0; left: -40px;
  }

デモ: http://jsfiddle.net/Mn2Wg/

Answer 3

これを試して：

a {
    border-bottom: 2px dashed;
    text-decoration: none;
    margin-left: 50px;
}
a:before {
    content: "";
    position: absolute;
    background: url('path') no-repeat left center;
    width: 50px;
    height: 25px;
    margin-left: -45px;
}

また、デモを確認してください。