防止左侧填充将元素推向右侧

Question

我有一些预览文本，后跟带有过渡的链接，并且我试图确保链接的文本与预览文本的对齐。无需填充即可正常工作：

但是，向锚元素添加填充会导致整个元素向右移动左填充量：

如何做到这一点，以便以某种方式在元素的父容器的外部处应用填充？如果无法做到这一点，如何简单地确保预览文本和链接的文本都左对齐？

以下是相关的HTML：

<div id="hero-about-container">

<div id="hero-about-text-container">    
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div>

<a id="hero-about-link" href="localhost/wordpress/about">Read more about the history of the centre <span id="icon">&#187;</span></a>

</div>

...以及相应的CSS：

#hero-about-text-container {
  line-height: 40px;
  width: 50%;
  margin-top:30px;
}

#hero-about-link {
  padding: 3px 5px 3px 5px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;

}

#hero-about-link:hover, 
#hero-about-link:focus, 
#hero-about-link:active {
  background-color: #FFF;
  color: #000;
}

这似乎应该是一个很常见的问题，有一个简单的解决方案，但是我不知道那是什么。我知道box-sizing:border-box设置在祖先元素上的某个位置，所以这是我的第一个想法，但是在锚点元素上设置box-sizing:content-box似乎没有什么作用。

Answer 1

您可以在元素的左侧和右侧应用边框，并指定负边距。可能会有更优雅的解决方案，但是我认为这会产生您想要的效果？

我提供了一个永久突出显示的内容，并在悬停示例中突出显示了。 R.id.fab两者相同。

---

演示

CSS

.wrapper {
  background: whitesmoke;
  padding: 20px;
}

a:hover, a.highlighted {
  background: blue;
  border-left: 5px solid blue;
  border-right: 5px solid blue;
  margin-left: -5px;
  color: white;
}

Answer 2

类似于Oliver的答案，您也可以通过填充来代替左右边框来实现它。

.wrapper {
  background: whitesmoke;
  padding: 20px;
}

a{
  text-decoration: none;
}

a:hover, a.highlighted {
  background: blue;
  padding: 0 5px;
  margin-left: -5px;
  color: white;
}

<div class="wrapper">
  <p>Some text here</p>
  <a href="#">Anchor text here</a><br>
  <a href="#" class="highlighted">Anchor text here</a>
</div>

Answer 3

您可能正在寻找outline：

.box {
  padding:20px;
  background:red;
  color:#fff;
  font-size:18px;
}
.box > a {
  margin:10px 0;
  display:inline-block;
  background:#fff;
  color:#000;
  outline:10px solid #fff;
}

<div class="box">
  some long text here<br>
  <a href="">a link</a>
</div>

或box-shadow：

.box {
  padding:20px;
  background:red;
  color:#fff;
  font-size:18px;
}
.box > a {
  padding:10px 10px 10px 0; 
  display:inline-block;
  background:#fff;
  color:#000;
  box-shadow:-10px 0 0  #fff;
}

<div class="box">
  some long text here<br>
  <a href="">a link</a>
</div>