Question

我想在Wordpress网站上的几个项目之后放一个图像。我不想在所有类似项目之后放置图像，只有特定项目。

谢天谢地，每个特定项目都会生成它自己的css类。

我认为使用:after将是答案，但我在某处失败。

<div id="menu_4212" class="menu_content_classic">
<h5 class="menu_post">
    <span class="menu_title">Onion Soup</span>
    <span class="menu_dots"></span><span class="menu_price">€4.50</span>
</h5>

我想把图像放在＆＃34;洋葱汤＆＃34;

之后

所以我尝试了这种方法专门针对#menu_4212：

#menu_4212.menu_post.menu_title::after {
  content: url('..images/gluten_free.png')
}

我认为我的div层次结构可能不对，任何想法都会很棒。

Answer 1

从技术上讲，你不能通过CSS在两个<span>标签之间插入图片标记，让我们说：

.menu_title::after {
  content: "NEW";
}

这会将其插入<span class="menu_title">Onion SoupNEW</span>

如果您尝试插入图片，则相同：

.menu_title::after {
  content: url('..images/gluten_free.png');
}

问题在于您的选择器#menu_4212.menu_post.menu_title::after，它针对同一元素上的所有内容，例如<span id="menu_4212" class="menu_post menu_title">

使用你的标记你应该这样做，请注意差距。

#menu_4212. menu_post. menu_title::after {
  content: url('..images/gluten_free.png')
}

请注意，使用此方法，您无法通过CSS控制图像的大小。但是，您可以使用背景图像。

#menu_4212. menu_post. menu_title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url('..images/gluten_free.png') 0 0 no-repeat;
  background-size: contain;
}

此外，您还可以通过.menu_post::after {...}插入图像，然后使用flexbox order属性对其进行重新排序，使图像在视觉中间显示。

Answer 2

尝试：

#menu_4212 .menu_post .menu_title::after {
  content: url('..images/gluten_free.png')
}

您当前的代码假定ID＆amp; 2个类都在同一个元素上。你想使用＆＃34; descendant＆＃34;语法代替。

Answer 3

如果您想这样做，可以为:after伪元素提供一些display属性，并指定其尺寸。然后将图像放在背景上。它将为您提供一些图像样式的灵活性。

像这样（根据自己的需要设计风格）：

#menu_4212 .menu_post .menu_title::after {
   content: '',
   display: block,
   width: 30px;
   height: 30px;
   background: url('..images/gluten_free.png') no-repeat center center;
   background-size: cover;
}

如何使用CSS在一些文本之后放置图像？

3 个答案: