如何使锚点伪元素周围的空白区域具备点击交互性？

无需添加外层div，只需调整a标签的padding来扩大可点击范围，同时修正箭头伪元素的定位即可，具体代码修改如下：

修改后的完整CSS代码 #

.sageata {
    height: 2px;
    width: 40px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 4px;
    transition: all .4s ease;
    background: #000000;
    padding: 5px 15px 5px 0 !important; /* 上下各加5px、右边加15px padding，扩展点击区域 */
    box-sizing: content-box; /* 保证padding不会压缩原有线条宽度 */
}

.sageata:hover {
    width: 50px;
    margin-right: 5px;
    background: #000000 !important;
}

.sageata::before,
.sageata::after {
    content: "";
    background: #000000;
    position: absolute;
    height: 2px;
    width: 15px;
    border-radius: 30%;
}

.sageata::before {
    right: 13px; /* 适配padding调整后的位置 */
    bottom: 5px; /* 适配padding调整后的位置 */
    transform: rotate(-45deg);
    top: auto !important;
    left: auto !important;
}

.sageata::after {
    right: 13px; /* 适配padding调整后的位置 */
    top: 5px; /* 适配padding调整后的位置 */
    transform: rotate(45deg);
}

原理说明 #

• 通过给.sageata添加上下各5px、右侧15px的padding，让a标签的可点击区域直接覆盖你所说的红色矩形范围
• 用box-sizing: content-box确保原有线条的宽度不会被padding压缩
• 调整箭头伪元素的right、top、bottom值，让箭头保持在正确的视觉位置

HTML部分无需修改，仍然使用：

<a class="sageata" href="#"></a>

内容的提问来源于stack exchange，提问作者Mr. Fontastic