：before是否不适用于img元素？

小哥阳光2020-03-24

我正在尝试使用:before选择器将图像放置在另一个图像上，但是我发现将图像放置在一个img元素之前（仅在其他某个元素之前）根本不起作用。具体来说，我的风格是：

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

我发现这很好用：

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

但这不是：

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

我可以使用div或p元素代替它span，浏览器可以将我的图像正确地覆盖在该img元素中的图像上，但是如果我将overlay类应用于img自身，则无法正常工作。

我希望这项工作能够正常进行，因为这会让我感到不span舒服，但更重要的是，我有大约100个我想修改的博客文章，如果可以修改样式表，我可以一口气做到这一点，但是如果我必须返回并span在a和img元素之间添加一个额外的元素，这将需要做更多的工作。

伽罗理查德2020/03/24 15:01:50

这对我有用：

html

<ul>
    <li> name here </li>
</ul>

的CSS

ul li::before {
    content: url(../images/check.png);
}

卡卡西2020/03/24 15:01:50

在前一个元素上尝试:: after。

伽罗理查德2020/03/24 15:01:50

:: before和:: after生成的伪元素包含在元素的格式框中，因此不适用于替换的元素（例如img）或br元素。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/ ::之后

西门神奇2020/03/24 15:01:50

::after 可用于显示图像的后备图像

参见下面的示例，前两个img标记指向断开的网址。但是第二个显示的是备用图片，而不是浏览器中默认的损坏徽标。但是，我不确定这是否可行，我觉得要使其正常工作有点棘手。

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

西里阳光2020/03/24 15:01:50

我认为，查看为什么此方法无效的最佳方法是：before和：after在将它们应用到标签内的内容之前或之后插入它们的内容。因此，它可以与div或spans（或大多数其他标签）一起使用，因为您可以将内容放入其中。

<div>
:before
Content
:after
</div>

但是，img是一个自包含的，自动关闭的标签，并且由于它没有单独的关闭标签，因此您不能在其中添加任何内容。（这看起来应该像<img>Content</img>，但是当然不起作用。）

我知道这是一个老话题，但是它首先出现在Google上，因此希望它可以帮助其他人学习。

逆天Pro逆天2020/03/24 15:01:50

之前和之后的伪选择器不会插入HTML元素，而是在目标元素的现有内容之前或之后插入文本。由于图像元素不包含文本或有后代，既不img:before或者img:after将你带来任何好处。这也是相同的元件的情况下<br>和<hr>出于同样的原因。

小胖LEY西门2020/03/24 15:01:50

由于<img>被替换元素的性质，文档样式不会影响它。

无论如何要引用它，<picture>提供了一个理想的本地包装器，可以在其上附加伪元素，如下所示：

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer