CSS img 插入到 :hover:after breaks if two lines

Question

我的目标是在用户将鼠标悬停在 h3 上时在其右侧显示图像。如果 h3 是一行，我的代码就可以工作，但如果 h3 变成两行或更多行，它就会中断，因为图像显示仍然紧跟在文本之后而不是在整个 block 之后显示。

我正在开发 WordPress 模板。

我将绝对定位添加到 a:hover:after 否则图像的插入会移动整个 h3 元素。

<div class="col-sm-10 offset-sm-1">
    <div class="blog-entry">
    <?php   
    the_title( '<h3 class="blog-entry-title">🥑 <a href="' . esc_url( 
        get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); 
    ?>
    </div>
</div>

这是我的 CSS

.blog-entry-title {
    min-height: 75px;
}

.blog-entry-title a {
    color: #232323;
    padding: 15px 90px 15px 15px;   
}

.blog-entry-title a:hover {
    color: #66ccff;
}

.blog-entry-title a:hover:after {
    content:url('https://example/color-burst.png');
    position: absolute;
    top: -10px;
}

Answer 1

尝试使用 background-image 而不是 content:url。您可以调整 background-position 而不是移动生成的 img 元素的顶部。

我也在使用 position:absolute，但只是为了设置 width 和 height，所以元素停留在行。

.wrapper {
  width: 250px;
}

.blog-entry-title {
    min-height: 75px;
}

.blog-entry-title a {
    color: #232323;
    padding: 15px 90px 15px 15px;

}

.blog-entry-title a:hover {
    color: #66ccff;
}

.blog-entry-title a:hover:after {
  content: '';
  background: url("https://upload.wikimedia.org/wikipedia/commons/f/fe/Farm-Fresh_bullet_error.png");
  background-repeat: no-repeat;
  background-position: 50% 40%;
  position: absolute;
  width: 16px;
  height: 16px;
}

<div class="wrapper">
<div class="blog-entry">
  <h3 class="blog-entry-title"><a href="#">Hello world</a></h3>
</div>
<div class="blog-entry">
  <h3 class="blog-entry-title"><a href="#">The Best Guacamole Recipe in the World</a></h3>
</div>
<div class="blog-entry">
  <h3 class="blog-entry-title"><a href="#">Goodbye world</a></h3>
</div>
</div>
</div>