html - 如何在链接文本和 :after clickable? 之间留出空白

Question

Fiddle .

如果您将鼠标悬停在“CLOSE”和三 Angular 形的 :after 元素之间，则您无法单击该链接。

有没有一种方法可以使该区域可点击并且看起来仍然一样？

HTML:

<div class="close">
  <a href="#">Close</a>
</div>

CSS:

.close {
    margin-top: 21px;
    width: 100%;
    padding-top: 14px;
    text-align: center;
}
.close > a {
    position: relative;
    color: #000;
    font-size: 0.9375em;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.close > a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 4px;
    right: -32px;
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

Answer 1

在a标签中加入display: inline-block和padding-right: 30px，将right: 0px改成> 对于 :after