Home  >  Article  >  Web Front-end  >  What can be put in the content attribute of after in css3

What can be put in the content attribute of after in css3

WBOY
WBOYOriginal
2022-06-07 17:07:023002browse

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.

What can be put in the content attribute of after in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

The content attribute of after in css3

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:

What can be put in the content attribute of after in css3

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:

What can be put in the content attribute of after in css3

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

Statement:
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