如何使用 ::after 在元素后显示图像答案

【问题标题】：How to display an image after an element using ::after如何使用 ::after 在元素后显示图像
【发布时间】：2022-11-20 03:07:15
【问题描述】：

我试图在元素之后显示图像，但我不明白为什么我的方法不起作用。我尝试了两种方法：

.item-navbar::after {
content: " ";
width: 30px;
height: 20px;
background: transparent url('up-arrow-angle.png') no-repeat;

这不显示任何内容。另一个：

.item-navbar::after{
content: url('up-arrow-angle.png');
height: 30px;
width: 20px;

这根本不会改变图像的高度或宽度。我究竟做错了什么？

【问题讨论】：

stackoverflow.com/help/formatting
谢谢 Jojo 先生，您真的很有帮助！继续做你做的事！
这回答了你的问题了吗？ Does :before not work on img elements?
不客气，所以你要更正你的问题的陈述？
这回答了你的问题了吗？ width and height doesn't seem to work on :before pseudo-element

标签： html css

【解决方案1】：

::after伪元素默认是内联的。添加display: inline-block;：

.item-navbar::after{
  display    : inline-block;
  content    : '';
  background : url('up-arrow-angle.png');
  height     : 30px;
  width      : 20px;
}

在 CSS 中，::after 创建一个伪元素，它是选定的元素。它通常用于向具有内容属性的元素。它默认是内联的。https://developer.mozilla.org/en-US/docs/Web/CSS/::after

【讨论】：