Pseudo classes and pseudo elements in css: after

This article mainly introduces the :after pseudo-class and pseudo-element in CSS, which has a certain reference value. Now I share it with you. Friends in need can refer to it

## There are some special attributes in #CSS, called pseudo-classes. The most commonly used among them are pseudo-links: link, :visited, :hover, :active, etc. This article introduces the usage of after in detail. Friends who are interested can learn about it, it may be helpful to you

In addition to them, there are also some pseudo-classes that are not commonly used, including: focus, :first-child, :lang, etc.

And there are not only pseudo-classes in CSS, but also pseudo-elements, such as: :first-letter, :first-line, :before and :after.
The other pseudo-elements in this article will not be listed for the time being, let’s just talk about: after pseudo-element.
After, as the name suggests, means after the element. The essence is to add content after the element.
This pseudo-element allows producers to insert generated content at the end of the element content. It needs to be used with the content attribute to set the content that occurs after the object. By default, this pseudo-element is inline, but this can be changed using the display attribute.
All mainstream browsers support the :after pseudo-element, but for IE, it is only supported by IE8 and above.


The following is an example of inserting into the CSS code:

The code is as follows:

<style type="text/css"> 
h1:after {content:url(logo.gif)} 
</style> <h1>标题内容</h1>

When displayed, a picture will be inserted after the title content. This is what the pseudo element :after does.
:The content of the after pseudo-class can also be followed by other parameters,

1: String For example:

<style type="text/css"> 
.test:after{content:"测试代码"}; 
</style> 
<p class="test">测试p：</p>
运行结果显示为：
测试p：测试代码

##Two: attr(x ), attr means attribute. As the name suggests, it is to read the attributes of this type of node. For example:
The code is as follows:

<style type="text/css"> 
.test:after{content:attr(id)}; 
</style> 
<p class="test" id="aaa">测试p的id为：</p>运行结果显示为：测试p的id为：aaa

close-quote: Insert the trailing tag of the quotes attribute no-close-quote: Do not insert the trailing tag of the quotes attribute. But increase its nesting level
open-quote: Insert the pre-tag of quotes attribute
no-open-quote: Do not insert the pre-tag of quotes attribute. But reduce its nesting level

Related recommendations:

The above is the detailed content of Pseudo classes and pseudo elements in css: after. For more information, please follow other related articles on the PHP Chinese website!