【前端】：内容生成（::before、::after）
【前端】：内容生成（::before、::after）
1. 伪类、伪元素？
1.1. 伪类（pseudo-class）
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
1.2. 伪元素（pseudo-element）
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.
兼容性：
如果不用考虑IE8
建议使用 ::pseudo-element 语法
语义性：
伪元素的意义就在于它可以使 HTML 更加语义化。有些时候为了某些效果，不得不添加一些无意义的标签，而伪元素既能起到这种辅助布局的作用，又不需要增加无意义的标签。
2. ::before 、::after
在 CSS 中可以使用 ::before 伪元素选择器与 ::after 伪元素选择器在页面中的元素的前面或后面生成内容，而生成的内容是用 content 属性来定义的。
/* CSS3 syntax */
::before
::after
/* CSS2 syntax */
:before
:after用 content 主要用于生成以下几类内容：
- 普通字符串
- 计数器（counter）
- html元素属性值（attr）
- 外部资源（url）
- 引号（quotes）
/* Keywords that cannot be combined with other values */
content: normal;
content: none;
/* <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
/* alt text for generated content, added in the Level 3 specification */
content: url("http://www.example.com/test.png") / "This is the alt text";
/* values below can only be applied to generated content using ::before and ::after */
/* <string> value */
content: "prefix";
/* <counter> values */
content: counter(chapter_counter);
content: counters(section_counter, ".");
/* attr() value linked to the HTML attribute value */
content: attr(value string);
/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* Except for normal and none, several values can be used simultaneously */
content: open-quote chapter_counter;3. 生成——普通字符串
应用场景：必填项符号——*
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.stringinput-required::after{
content: "*";
color: red;
vertical-align: middle;
}
</style>
</head>
<body>
<form>
<div class="stringinput stringinput-required">
<label for="xm">姓名:</label>
<input name="xm" type="text"/>
</div>
</form>
</body>
</html>4. 生成——CSS计数器
4.1. 先看几个例子
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style: none;
}
ul {
counter-reset: simplecounter;
}
li {
counter-increment: simplecounter;
}
li::before{
content: counter(simplecounter)". ";
}
</style>
</head>
<body>
<ul>
<li>列表条目</li>
<li>列表条目</li>
<li>列表条目</li>
<li>列表条目</li>
<li>列表条目</li>
</ul>
</body>
</html>示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style: none;
}
/* level1 */
ul.level1 {
counter-reset: level1counter;
}
ul.level1 > li {
counter-increment: level1counter;
}
ul.level1 > li::before{
content: counter(level1counter, upper-roman)". ";
}
/* level2 */
ul.level2 {
counter-reset: level2counter;
}
ul.level2 > li {
counter-increment: level2counter;
}
ul.level2 > li::before{
content: counter(level1counter)"."counter(level2counter)". ";
}
</style>
</head>
<body>
<ul class="level1">
<li>
一级标题
<ul class="level2">
<li>
二级标题
</li>
<li>
二级标题
</li>
</ul>
</li>
<li>
一级标题
<ul class="level2">
<li>
二级标题
</li>
<li>
二级标题
</li>
</ul>
</li>
<li>
一级标题
<ul class="level2">
<li>
二级标题
</li>
<li>
二级标题
</li>
</ul>
</li>
</ul>
</body>
</html>示例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
form {
counter-reset: mycounter;
}
input:checked {
counter-increment: mycounter;
}
div::after{
content: "("counter(mycounter)")个分类";
}
</style>
</head>
<body>
<form method="POST" action="./submit">
HTML5: <input type="checkbox" name="h5" value="html5"/>
CSS3: <input type="checkbox" name="h5" value="css3"/>
JS: <input type="checkbox" name="h5" value="js"/>
<div>你一共选择了</div>
<input type="submit"/>
</form>
</body>
</html>4.2. 详解
CSS 中有一个计数功能，就像使用变量一样，它有以下4个属性：
- counter-reset：创建或重置计数器；
- counter-increment：增长计数器；
- content：生成内容；
- counter()：将计数器的值添加到生成内容中
Manipulating a counter's value：
To use a CSS counter, it must first be initialized to a value with the counter-reset property (0 by default). The same property can also be used to change its value to any specific number. Once initialized, a counter's value can be increased or decreased with counter-increment. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
Displaying a counter：
The value of a counter can be displayed using either the counter() or counters() function in a content property. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo- element. It is formatted in the specified style (decimal by default). https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
The counters() function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at the given pseudo- element, from outermost to innermost, separated by the specified string. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol {
list-style: none;
}
ol {
counter-reset: mycounter;
}
li {
counter-increment: mycounter;
}
li::before {
content: counters(mycounter, ".")" ";
}
</style>
</head>
<body>
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
</body>
</html>4.3. CSS API
counter-reset：
// Formal syntax:
counter-reset: [ <custom-ident> <integer>? ]+ | none
// examples:
counter-reset: my-counter; /* Set "my-counter" to 0 */
counter-reset: my-counter -1; /* Set "my-counter" to -1 */
counter-reset: counter1 1 counter2 4; /* Set "counter1" to 1, and "counter2" to 4 */
counter-reset: none; /* Cancel any reset that could have been set in less specific rules */counter-increment:
// Formal syntax:
counter-increment: [ <custom-ident> <integer>? ]+ | none
// examples:
counter-increment: my-counter; /* Increment "my-counter" by 1 */
counter-increment: my-counter -1; /* Decrement "my-counter" by 1 */
counter-increment: counter1 counter2 -4; /* Increment "counter1" by 1, and decrement "counter2" by 4 */
counter-increment: none; /* Do not increment/decrement anything: used to override less specific rules */counter():
// Formal syntax:
counter( <custom-ident>, <counter-style>? )
// examples:
counter(countername); /* Simple usage */
counter(countername, upper-roman) /* changing the counter display */counters():
// Formal syntax:
counters( <custom-ident>, <string>, <counter-style>? )
// examples:
counters(countername, '-'); /* Simple usage - style defaults to decimal */
counters(countername, '.', upper-roman) /* changing the counter display */5. 生成——图片
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.news::after {
content: url(new.gif);
}
</style>
</head>
<body>
<div>
<div class="news">[新闻]毕加索名画《女子半身像》被撕</div>
<div class="news">[新闻]王晓雁加盟小米</div>
</div>
</body>
</html>6. 生成——元素属性值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a::after {
content: attr(title)"-"attr(href);
}
</style>
</head>
<body>
<div>
<a title="百度" href="https://www.baidu.com/"></a>
</div>
<div>
<a title="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"></a>
</div>
</body>
</html>
参考：
伪类、伪元素： https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements content： https://developer.mozilla.org/en-US/docs/Web/CSS/content Using CSS counters： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters 《CSS 核心技术详解》 《HTML5 与 CSS3 权威指南》