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