这些添加伪类上呈现的内容,不会出现在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;
}

代码演示:

202101141610610349152469

(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; }

代码演示:

202101141610610349152469-1651827731552

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) ")"; }

代码演示:

202101141610610998178631

(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;
}

代码演示:

202101141610611455378798