有没有办法在锚元素中将 img 与源(文本)分开放置?例如,在图片中,我希望“点”这个词比箭头更靠右对齐,但保持在箭头的顶部。
我知道我可以将它们作为单独的锚点,但我希望当您将鼠标悬停在箭头上时,单词的颜色也会发生变化,如果它们是分开的,则 a:hover 不能一起使用。
我尝试将 .left img 下的位置更改为不同,但它移动了 img 和源。
HTML 代码:
<span class="leftarrow">
<a href="dot.html">dot<img src="images/leftarrow.png"></a>
</span>
CSS 代码:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
答案 0 :(得分:1)
试试这个,使用 Pseudo-Elements。不过,它肯定可以比这更优化。
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
答案 1 :(得分:0)
首先:将 dot
包装成 <span>
或 <div>
以便更好地控制,
第二:使用更强大的显示模式(例如:flex 或 grid)
这是一个示例:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>