what is css after-CSS Tutorial-php.cn

what is css after

藏色散人

Release： 2023-01-04 09:36:29

Original

10167 people have browsed it

css after is a selector in CSS that can be used to insert content after the content of the selected element. Its syntax is such as "p:after{ content:"";background-color:yellow ;color:red;}".

what is css after

The operating environment of this article: Windows 7 system, Dell G3 computer, css3 version.

Recommended: "css Video Tutorial"

In CSS, the function of the :after pseudo-class is to specify the content of the element (not the element itself) Then insert an inline element containing the content specified by the content attribute.

The most basic usage is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
p:after {
content: "- 台词";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

Copy after login

Rendering:

what is css after

Some applications of after pseudo-classes

: afterClear float

When the floating layout causes height collapse and affects the overall layout, the element needs to clear the float. Using: after is one of the methods:

.row:after {
width:0;
height:0;
content:&#39;&#39;;
display: block;
clear: both;
}

Copy after login

Pseudo class and pseudo element

The pseudo-class selection element is based on the current state of the element, or the current characteristics of the element, rather than static signs such as the element's id, class, and attributes. Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on abstraction outside of the document, so it is called a pseudo class.

Different from pseudo-classes that target elements in a special state, pseudo-elements operate on specific content in the elements. The level they operate is deeper than that of pseudo-classes, so its dynamics are Pseudo-classes are much lower. In fact, the purpose of designing pseudo-elements is to select the first letter (letter) and first line of element content, and select the front or back of certain content, which is something that ordinary selectors cannot do. The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo element.

The above is the detailed content of what is css after. For more information, please follow other related articles on the PHP Chinese website!