有没有办法影响 img 的位置，但不影响锚元素中的源？

Question

有没有办法在锚元素中将 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;
}

Answer 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>

Answer 2

首先：将 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>