Home > Article > Web Front-end > What can be put in the content attribute of after in css3
The content attribute of the ":after" pseudo-element in css3: 1. Set to none null value; 2. Set to normal, which will be regarded as none null value; 3. Counter sets the counter and the generated content It is the count of the minimum range of the specified name of the pseudo-class element; 4. Set to string text content; 5. Set to "open-quote" before quotation marks; 6. Set to "close-quote" after quotation marks, etc.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
The content attribute is used in conjunction with the :before and :after pseudo-elements to insert content.
Syntax format:
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
Possible values:
none Set content to a null value.
normal will be treated as none in :before and :after pseudo-class elements, that is, it is also a null value.
counter sets the counter, the format can be counter(name) or counter(name,style). The generated content is the count of the minimum range of the specified name of the pseudo-class element; the format is specified by style (the default is 'decimal' - decimal number)
attr(attribute) changes the element's attribute attribute is returned as a string. .
string Set text content
open-quote Set front quotation mark
close-quote set Back quotes
no-open-quote Remove the opening quotes of the content
no-close-quote Remove the closing quotes of the content
url(url) Set the link address of a certain media (image, sound, video, etc.)
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
p:before {
content:"天王盖地虎- ";
}
p#testID:before {
content:none;
}
</style>
</head>
<body>
<p>宝塔镇河妖</p>
<p id="testID">强的很！！！</p>
</body>
</html>Output result:
Example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<p>天王盖地虎-宝塔镇河妖</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What can be put in the content attribute of after in css3. For more information, please follow other related articles on the PHP Chinese website!