我下面有这个箭头img元素。
null
<img src="https://websvcs.utdallas.edu/shared/svg/arrow-diagonal-black.svg" alt="opens a link">
null
我应该如何将img元素嵌入到锚元素中。我希望箭头在右上角的超链接和更小,与超链接相同的大小。主要的关注点是使箭头位于超链接的右上方。
<a href="###">Test</a>
null
像这样的?标签有位置的地方:relative;标签在里面,位置是:绝对;
null
body {
padding: 3rem;
}
a {
display: inline-block;
position: relative;
font-weight: bold;
letter-spacing: 1px;
color: black;
text-decoration: none;
}
a img {
position: absolute;
bottom: 100%;
right: 0;
max-width: 20px;
}
<a href="#">
Link Text
<img src="https://websvcs.utdallas.edu/shared/svg/arrow-diagonal-black.svg" />
</a>