当使用CSS的::before和::after伪元素时,对于<img>标签,这些伪元素的使用会失效。这是因为<img>标签是一个自闭合标签,它并不包含实际的内容,因此无法直接在其前后添加额外的内容或样式。
在实际项目中,有时需要在图片的前后添加一些装饰性或说明性的内容,比如标签、说明文字等。如图:
然而,对于<img>标签,这样的操作是无效的。
比较常见的解决方法是将<img>标签放置在一个外部容器内,然后对这个容器使用伪元素来添加内容和样式。
接着,在CSS中,对外部容器使用伪元素:
还有一种做法是伪造 content,给 img 这类标签添加 content 属性,输入一些无意义的文本,让浏览器认为标签含有实际内容。
如在 CSS 中添加:
但这种方法可能会存在浏览器兼容问题。建议还是使用外部容器法。
上一篇: 伪元素与hover的妙用
下一篇: 栏目模型字段在循环中调用