我已经构建了一个展开的箭头,我希望"里面"的白色区域可以点击(整个红色矩形).
不幸的是,我不能在它周围添加一个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>