css教程详解CSS content的使用机制，原来还可以这样用！

<img src="1.jpg">
<!--替换-->
<img src="2.jpg">

<img src="../assets/test1.jpeg">
<img width="300" height="200" class="img-test" src="../assets/test1.jpeg">
<img class="img-box" width="300" height="200" src="../assets/test1.jpeg">

.img-box {
  height: 100px;
  width: 200px;
}

<img width="300" height="200" class="img-test" src="../assets/test1.jpeg">

.img-test:hover {
 content: url('../assets/test2.jpg');
}

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: '空元素内容';
  color: red;
}

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: '';
 display: block;
 clear: both;
}

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url('../assets/test2.jpg');
}

<!--方案一 -->
.img-test::after {
  content: url('../assets/test2.jpg');
}

<!--方案二 -->
.img-test::after {
  content: '';
  display: block;
  height: 20px;
  width: 20px;
  background: url('../assets/test2.jpg');
}

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

<!--format 属性是帮助浏览器识别字体的-->
@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome, firefox */
  url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

<!--html-->
<div class="look-more">查看更多</div>

<!--css-->
.look-more {
  font-size: 14px;
  &::after {
    font-size: 14px;
    font-family: 'iconfont';
    content: '\e6a7';
  }
}

<!--计数器名字为 counter，默认值为 0-->
.count-test { counter-reset: counter; }

<!--计数器名字为 counter，初始计数为 2-->
.count-test { counter-reset: counter 2; }

<!--多个计数器同时命名，使用空格分隔-->
.count-test { counter-reset: counter 2 counterpre -1; }

<!--counter 计数器默认递增 1-->
counter-increment: counter;

<!--counter 计数器递增 2-->
counter-increment: counter 2;

<!--counter 计数器递增 2，counterpre 计数器递减 -1-->
counter-increment: counter 2 counterpre -1;

<p class="counter"></p>

<!--counter-increment 普照源 <p> 标签，初始值为 2，counter-reset 值增加，默认递增 1，最终显示为 3-->
.counter {
 counter-reset: counter 2;
 counter-increment: counter;
}
.counter:before {
 content: counter(counter);
}

<!-- counter-increment 直接设置在伪元素上普照自身，和上述一样显示 3-->
.counter {
 counter-reset: counter 2;
}
.counter:before {
 counter-increment: counter;
 content: counter(counter);
}

<!--父元素和子元素都被 counter-increment 普照 1 次，递增了两次，最终显示为 4-->
.counter {
 counter-reset: counter 2;
 counter-increment: counter;
}
.counter:before {
 counter-increment: counter;
 content: counter(counter);
}

<!--name 就是 counter-reset 的名称-->
counter(name)

<!--style 值就是 list-style-type 支持的那些值，可以是英文等-->
counter(name, style)

<!--string 参数为字符串（需要引号包围的，是必需参数），表示子序号的连接字符串。例如，1.1 的 string 就是'.'，1-1 就是'-'-->
counters(name, string)

counters(name, string, style)

<div class="reset">
    <div class="counter">替换元素
        <div class="reset">
            <div class="counter">替换元素的尺寸计算规则</div>
            <div class="counter">替换元素和 content 是什么关系呢？</div>
        </div>
    </div>
    <div class="counter">content 的使用场景
        <div class="reset">
            <div class="counter">插入字符</div>
            <div class="counter">辅助元素生成</div>
            <div class="counter">图片生成</div>
            <div class="counter">attr 属性值内容生成</div>
            <div class="counter">字符内容生成</div>
            <div class="counter">计数器</div>
        </div>
    </div>
</div>

.reset {
  counter-reset: counter;
}
.counter:before {
  content: counters(counter, '.') '. ';
  counter-increment: counter;
}