左边的图标有间距但是根据文字边框

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

另外，请检查demo。

Answer 4

检查这个小提琴：

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 */
}