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 see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
Web Front-end
