Question

如果将鼠标悬停在“CLOSE”和：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

将display: inline-block和padding-right: 30px添加到a代码，更改right: 0px的{{1}}

Answer 2

https://jsfiddle.net/n0hs9q14/

.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;
    background: red;
    display: inline-block; /* if vertical padding is required */
    padding: 10px 30px 10px 0;
}
.close > a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 13px;
    right: 0;
    /*right: -32px; dont take arrow out of parent */
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

我所做的就是在a代码中添加箭头，方法是在右侧添加a一些填充，并将right:0提供给:after ..背景仅供查看top的{{1}}已更改为垂直对齐

如何在链接文本和：点击之后创建这个空白区域？

2 个答案: