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

检查这个小提琴：

http://jsfiddle.net/GCpQa/

a {
    border-bottom: 2px dashed;
    margin-left: 40px; /* play with this margin as you want */
    position: relative;
    font-size: 24px;
    font-weight: bold;
}
a:before {
    position: absolute;
    content:'';
    width: 30px; /* image width */
    height: 30px; /* image height */
    background: #ff0000; /* put you image background here */
    left: -40px; /* play with this position as you want */
}

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;
}

另外，检查演示。

Answer 4

使用: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/