我已经建立了一个可扩展的箭头,我希望白色区域“内部”可点击(整个红色矩形)。
很遗憾,我无法在其周围添加一个div,因此我需要另一种解决方案。.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: 0 !important;
}
.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: -2px;
bottom: -5px;
transform: rotate(-45deg);
top: auto !important;
left: auto !important;
}
.sageata::after {
right: -2px;
top: -5px;
transform: rotate(45deg);
}
<a class="sageata" href="#"></a>