css3新增选择器（1）

这些添加伪类上呈现的内容，不会出现在dom中，不会改变文档内容，不可复制，仅仅在css渲染层加入。

content是必写属性，就算写空值也要写

content属性可以写：

（1）string字符串

<p class="tt">百度</p>

css样式：

.tt::before {
  content: "《";
  color: red;
}

.tt::after {
  content: "》";
  color: red;
}

.tt,
.t2 {
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

代码演示：

(2)通过attr()调用当前元素的属性，把取到的值显示在页面上

通过伪类在超链接标签的一前一后显示你要呈现的内容

<p> <a href="hhtps://www.baidu.com" title="www" class="t2">百度</a> </p>

css：

.t2::before{ content: "(" attr(href) ")"; color:aqua; } 
.t2::after{ content: "(" attr(title) ")"; color:pink; }

代码演示：

3）url/uri()引用媒体文件

<p> <a href="hhtps://www.baidu.com" class="t3">百度一下</a> </p>

css：

.t3::before{ content: url(https://www.baidu.com/img/flexible/logo/pc/result.png); } 
.t3::after{ content: "(" attr(href) ")"; }

代码演示：

（4）调用计数器，可以不使用列表元素实现序号功能。

配合counter-increment和counter-reset属性使用：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

<div class="t4">
  <h1>三国演义</h1>
  <h2>第一章</h2>
  <h2>第二章</h2>
  <h2>第三章</h2>
</div>

css：

body {
  counter-reset: section;
}

.t4 h1 {
  counter-reset: subsection;
}

.t4 h1::before {
  counter-increment: section;
  content: counter(section)"、";
}

.t4 h2::before {
  counter-increment: subsection;
  content: counter(section)"."counter(subsection)"、";
}

.t4 h1,
.t4,
h2 {
  font-weight: normal;
}

代码演示：