Html :before 对 img 元素不起作用吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5843035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:19:53  来源:igfitidea点击:

Does :before not work on img elements?

htmlcss

提问by Joshua Frank

I'm trying to use the :beforeselector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an imgelement, only some other element. Specifically, my styles are:

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

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

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

and I find that this works fine:

我发现这很好用:

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

but this does not:

但这不会:

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

I can use a divor pelement instead of that span, and the browser correctly overlays my image over the image in the imgelement, but if I apply the overlay class to the imgitself, it doesn't work.

我可以使用 a divorp元素代替 that span,并且浏览器正确地将我的图像覆盖在img元素中的图像上,但是如果我将覆盖类应用于它img本身,它就不起作用。

I'd like to get this working because that extra spanoffends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra spanelement in between the aand imgelements, this will be a lot more work.

我想让这个工作,因为这额外span冒犯了我,但更重要的是,我有大约 100 篇博客文章我想修改,如果我可以修改样式表,我可以一次性完成,但是如果我必须返回并spanaimg元素之间添加一个额外的元素,这将需要做更多的工作。

回答by cwharris

Unfortunately, most browsers do not support using :afteror :beforeon img tags.

不幸的是,大多数浏览器不支持使用:after:beforeimg 标签。

http://lildude.co.uk/after-css-property-for-img-tag

http://lildude.co.uk/after-css-property-for-img-tag

However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:

但是,您可以使用 JavaScript/jQuery 完成您需要的工作。看看这个小提琴:

http://jsfiddle.net/xixonia/ahnGT/

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

Edit:

编辑

For the reason why this isn't supported, check out coreyward's answer.

出于不支持此功能的原因,请查看coreyward 的答案

回答by coreyward

The before and after pseudo-selectors don't insert HTML elements —?they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:beforeor img:afterwill do you any good. This is also the case for elements like <br>and <hr>for the same reason.

before 和 after 伪选择器不插入 HTML 元素——它们在目标元素的现有内容之前或之后插入文本。由于图像元素不包含文本或有后代,既不img:before或者img:after将你带来任何好处。出于同样的原因<br><hr>对于类似的元素也是如此。

回答by TimPietrusky

I found a way to make this work in pure css:

我找到了一种在纯 css 中完成这项工作的方法:

The I'm just fake content-method

我只是假的内容-方法

a pure CSS method to enable img:after.

启用 img:after 的纯 CSS 方法。

You can check out the CodePen: I'm just fake contentor see the source.

您可以查看CodePen:我只是虚假内容或查看来源

Source & Snippet

来源和片段

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}
<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

Browser support

浏览器支持

✓ Chrome 10+

✓ 铬 10+

✓ Firefox 11+

✓ 火狐 11+

✓ Opera 9.8+

✓ 歌剧 9.8+

✓ Safari

✓ 野生动物园

No support

没有支持

⊗ Internet Explorer 8 / 9

⊗ Internet Explorer 8 / 9

Please test in other browsers

请在其他浏览器中测试

回答by dakab

Due to the nature of <img>being a replaced element, document styling doesn't affected it.

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

To reference it anyway, <picture>provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:

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

img:after, picture:after{
    content:"F63B";
    font-size:larger;
    margin:-1em;
}
<img src="//placekitten.com/110/80">

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

回答by truleighsyd

Here's another solution using a div container for img while using :hover::afterto achieve the effect.

这是另一个使用div容器为img同时使用:hover::after来实现效果的解决方案。

The HTML as follows:

HTML如下:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

The CSS as follows:

CSS如下:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

To see it in action, check out the fiddleI've created. Just so you know this is cross browser friendly and there's no need to trick the code with 'fake content'.

要查看它的实际效果,请查看我创建的小提琴。只是为了让您知道这是跨浏览器友好的,并且无需使用“虚假内容”来欺骗代码。

回答by Goda A

The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.

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

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

回答by BevansDesign

I think the best way to look at why this doesn't work is that :before and :after insert their content before or after the content within the tag you're applying them to. So it works with divs or spans (or most other tags) because you can put content inside them.

我认为查看为什么这不起作用的最佳方法是 :before 和 :after 在您应用它们的标签内的内容之前或之后插入它们的内容。因此它适用于 div 或 span(或大多数其他标签),因为您可以将内容放入其中。

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

However, an img is a self-contained, self-closing tag, and since it has no separate closing tag, you can't put anything inside of it. (That would need to look like <img>Content</img>, but of course that doesn't work.)

然而,一个 img 是一个自包含的、自关闭的标签,因为它没有单独的结束标签,你不能在它里面放任何东西。(这需要看起来像<img>Content</img>,但这当然行不通。)

I know this is an old topic, but it pops up first on Google, so hopefully this will help others learn.

我知道这是一个古老的话题,但它首先出现在谷歌上,所以希望这能帮助其他人学习。

回答by Sword I

This one works for me:

这个对我有用:

html

html

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

CSS

CSS

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

回答by Loi Nguyen Huynh

::aftermaybe used to display the fallback imageof an image

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



See the example below, first 2 imgtags are point to the broken urls. But the second one displays the fallback image instead of the default broken logo from the browser. However, I'm not sure this's any practical, I find it kind of tricky to get it to work right.

请参见下面的示例,前 2 个img标签指向损坏的 url。但是第二个显示的是后备图像,而不是浏览器中默认的损坏徽标。但是,我不确定这是否实用,我发现让它正常工作有点棘手。

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

回答by subindas pm

Try this code

试试这个代码

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}