The CSS :after property is used to insert content after an element in the document tree. However, it seems to work only with specific elements, such as paragraphs (
) and tables (
), but not with replaced elements like images () and form inputs ().
What Determines the Acceptability of :after and :before Properties?
The behavior of :after and :before is governed by the fact that replaced elements function differently. Replaced elements are those whose appearance and dimensions are defined by an external resource, such as images, plugins, and form elements.
According to the CSS specification, :before and :after only work with non-replaced elements. This means that they cannot be used to add content before or after replaced elements.
<span>
<before>Before</before>
Content of span
<after>After</after>
</span>
Copy after login
This structure demonstrates how :before and :after can insert content before and after a non-replaced element.
Exception with Image
However, using :after with an image does not yield the same result:
<img src="image.png" />
Copy after login
img:after {
content: "After";
}
Copy after login
This is because :after cannot alter the appearance of a replaced element.
The above is the detailed content of Why Doesn't CSS `:after` Add Content to Replaced Elements Like Images and Inputs?. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
Web Front-end
