Why Doesn't CSS `:after` Add Content to Replaced Elements Like Images and Inputs?-CSS Tutorial-php.cn

Why Doesn't CSS `:after` Add Content to Replaced Elements Like Images and Inputs?

CSS :after Not Adding Content to Certain Elements

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.

Example with Span

Consider the following HTML:

<span>Content of span</span>

Copy after login

With the following CSS:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

Copy after login

The DOM for this scenario looks like this:

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

source：php.cn

Previous article：How Can I Disable Hover Effects on a Specific Button Using CSS? Next article：Why Are My jQuery Click Events Failing on iOS, and How Can I Fix Them?

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