HTML/CSS：去掉 a 和 a:after 标记之间的空格答案

【问题标题】：HTML/CSS: Getting rid of space between a and a:after tagHTML/CSS：去掉 a 和 a:after 标记之间的空格
【发布时间】：2018-03-06 21:20:05
【问题描述】：

我目前的行为是这样的：https://jsfiddle.net/phpd41tb/13/

我有一个带有 a 标签的链接，以及带有 css :after: 的此链接的扩展

HTML

<a href="some-url">Notifications</a>

CSS

&:after {
        content : ">"; }

（这里的部分代码只是为了发帖）

如果您可以看到链接，则“通知”和“>”之间会出现闪烁，这是一个不属于链接的空格。

我想要的是，无论 a 标签和它的 :after 之间的空格是多少，整个“通知 >”块都是可点击的。

我在那里尝试了所有解决方案，它们或多或少是相同的，但由于在我的情况下这不是内联块问题，所以我无法使其工作：

我没有找到与此相关的任何其他内容，并且我更改 html 的所有尝试（例如将所有内容放入另一个 div 等）也没有奏效。

有什么想法吗？ :)

【问题讨论】：

标签： html css

【解决方案1】：

This 工作得相当顺利，我想。我已经通过填充动画更改了翻译动画，因此悬停不会从指针下方删除链接。

摘录：

...
  &:after {
    padding-left: 0.5rem;
    content : ">";
    transition :opacity 0.4s ease, padding 0.4s ease;
  }
  &:hover {
    &:after {
      padding-left: 2rem;
      opacity : 0.6;
    }
  }
...

【讨论】：

【解决方案2】：

将right : -15px; 更改为right : -12px;

.menu-title h6 {
  font-size: 1.2em;
  display: block;
  transition: opacity 0.4s ease 0.4s; 
}
 .menu-title h6 a {
    color: #000000;
    position: relative;
    text-decoration: none; 
}
.menu-title h6 a:after {
      position: absolute;
      top: -1px;
      right: -12px;
      content: ">";
      transition: transform 0.4s ease, opacity 0.4s ease; 
}
.menu-title h6 a:hover:after {
      transform: translateX(10px);
      opacity: 0.6; 
}

<div class="menu-title">
  <h6>
    <a href="some-url">Notifications</a>
  </h6>
</div>

【讨论】：