<a href="/" aria-label="赞">
<svg class="heart" width="24" height="24" viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
</a>
<a href="/" aria-labelledby="foo">
<svg class="heart" width="24" height="24" viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
</a>
<a href="/" aria-describedby="foo">
<svg class="heart" width="24" height="24" viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
</a>
<a href="/">
<svg class="heart" width="24" height="24" viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
<span class="sr-only">赞</span>
</a>
<p id="foo">赞</p>
body {
background-color: #FDF1F2;
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width:50vh;
height: 50vh;
fill: #EA442B;
}
a:hover {
text-decoration: none;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,.6))
}
#foo,
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.