I've built an expanding arrow and I would like the white area "inside" to be clickable (the entire red rectangle).
Unfortunately, I can't add a div around it so I need an alternate solution.
.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 href="#"></a>
CodePudding user response:
You could increase the height of the anchor and use a background gradient rather than a full-size color.
.sageata {
height: 24px;
width: 40px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 15px;
margin-bottom: 4px;
transition: all .4s ease;
background: linear-gradient(to bottom,
transparent 0%,
transparent calc(50% - 1px),
#000 calc(50% - 1px),
#000 calc(50% 1px),
transparent calc(50% 1px),
transparent 100%
);
padding: 0 !important;
}
.sageata:hover {
width: 50px;
margin-right: 5px;
}
.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 href="#"></a>