Question

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

我有一个带标签的链接，以及与css :after:

的此链接的扩展名

HTML

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

CSS

&:after {
        content : ">"; }

（这里的代码部分就是这样，我可以发布）

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

我想要的是整个块“通知＆gt;”无论a标签与其之间的空间是什么，都可以点击：在。之后。

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

我没有找到任何与此相关的内容，而且我所有改变html的尝试（比如将所有内容放入另一个div等）都没有用。

有什么想法吗？：）

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为，{p> This的工作非常顺利。我通过填充动画更改了翻译动画，因此悬停不会从指针下删除链接。

提取物：

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

HTML / CSS：删除a和a：之后的标记空格

2 个答案: