CSS 属性 content 有什么作用? 有什么应用?(琐碎知识点整理)
Posted 黑木令
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 属性 content 有什么作用? 有什么应用?(琐碎知识点整理)相关的知识，希望对你有一定的参考价值。
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
content 介绍
1. CSS 中主要的伪元素有四个：before/after/first-letter/first-line, 在 before/after 伪元素选择器中, 有一个content 属性, 能够实现页面中的内容插入 。
2. CSS 的 content 属性专门应用在 before/after 伪元素上, 用于来插入生成内容 。
3. 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
4. 可以配合自定义字体显示特殊符号 。
content 使用的 7 中方式概要
1. 插入纯文字
2. 嵌入文字符号
3. 插入图片
4. 插入元素的属性值
5. 插入项目编号
6. 项目编号修饰
7. 指定编号种类
1. 插入纯文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 1. 插入纯文字 */
.w_com-font {
background-color: cadetblue;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_com-font p {
font-size: 32px;
line-height: 36px;
}
.w_com-font p::after {
content: "演示插入内容";
font-size: 12px;
color: brown;
}
.w_com-font p::after {
/* content: none; */
/* content: normal; */
font-size: 12px;
color: brown;
}
</style>
<body>
<div class="w_content-shel">
<!-- 1. 插入纯文字 -->
<div class="w_com-font">
<p>插入纯文字</p>
</div>
</div>
</body>
</html>
2. 嵌入文字符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 2. 嵌入文字符号 */
/* 第三种 */
.w_con-symbol {
background-color: darkorange;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-symbol p {
/* 利用元素的 quote s属性指定文字符号 */
quotes:"(" ")";
}
.w_con-symbol p::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
.w_con-symbol p::after {
content: close-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
/* 第二种 */
.w_con-symbol h3 {
/* 添加双引号要转义 */
quotes:"\\"" "\\"";
}
.w_con-symbol h3::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
.w_con-symbol h3::after {
content: close-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
/* 第三种 */
.w_con-symbol h5 {
quotes: '提问: "' '"' 'kjk';
/* quotes: '"' 'kjk'; */
}
.w_con-symbol h5::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
.w_con-symbol h5::after {
content: close-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
</style>
<body>
<div class="w_content-shel">
<!-- 2. 嵌入文字符号 -->
<div class="w_con-symbol">
<p>嵌入文字符号 --1 </p>
<h3>嵌入文字符号 -- 2</h3>
<h5>嵌入文字符号 -- 3</h5>
</div>
</div>
</body>
</html>
3. 插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 3. 插入图片 */
.w_con-img {
background-color: chocolate;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-img p {
font-size: 32px;
line-height: 36px;
}
.w_con-img p::after {
/*
使用 content 设置图片的时候, 无法设置图片的大小, 如果想要实现图片可设置大小,
需要配合 background: url() 一起使用
*/
content: url('./j-use-url.png');
width: 20px;
height: auto;
/*
在使用 ::after 的情况下使用 background: url(), 注意设置 display: inline-block;
我在使用的过程中发现没有设置之前, 图片是无法正常显示的, 这里真的挺坑的, 使用的时候需要注意 。
*/
/* display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: "";
background: url("./j-use-url.png") no-repeat 0 0;
background-size: 20px auto; */
}
</style>
<body>
<div class="w_content-shel">
<!-- 3. 插入图片 -->
<div class="w_con-img">
<p>插入图片</p>
</div>
</div>
</body>
</html>
4. 插入元素的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 4. 插入元素的属性值 */
.w_con-attr {
background-color: deepskyblue;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-attr p {
font-size: 32px;
line-height: 36px;
}
.w_con-attr a::after {
content:attr(href);
}
</style>
<body>
<div class="w_content-shel">
<!-- 4. 插入元素的属性值 -->
<div class="w_con-attr">
<p>插入元素的属性值</p>
<a href="https://www.jianshu.com/p/52b03fa70743"></a>
</div>
</div>
</body>
</html>
5. 项目编号修饰
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 5. 插入项目编号 */
.w_con-number {
background-color: yellow;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-number p {
font-size: 32px;
line-height: 36px;
/*
我们可以 counter-reset: number 4; 4 这个数字的设置, 去控制显示的
数字大小, 可以根据注释的代码, 去体验具体的效果
*/
/* counter-increment: number; */
counter-reset: number 4;
}
.w_con-number p::before {
/* content: counter(number)'. '; */
content: counter(number)'. ';
}
</style>
<body>
<div class="w_content-shel">
<!-- 5. 插入项目编号 -->
<div class="w_con-number">
<p>插入项目编号</p>
</div>
</div>
</body>
</html>
6. 项目编号修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
/* 6. 项目编号修饰 */
.w_con-adorn {
background-color: teal;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-adorn p {
font-size: 32px;
line-height: 36px;
counter-increment: my 6;
}
.w_con-adorn p::after {
content:'第'counter(my)'节';
}
</style>
<body>
<div class="w_content-shel">
<!-- 6. 项目编号修饰 -->
<div class="w_con-adorn">
<p>项目编号修饰<br></p>
</div>
</div>
</body>
</html>
7. 指定编号种类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 7. 指定编号种类 */
.w_con-type {
background-color: tomato;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-type p {
font-size: 32px;
line-height: 36px;
counter-increment: my;
}
.w_con-type p::after {
content: counter(my, upper-alpha);
}
</style>
<body>
<div class="w_content-shel">
<!-- 7. 指定编号种类 -->
<div class="w_con-type">
<p>指定编号种类<br></p>
</div>
</div>
</body>
</html>
8. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 属性 content 有什么作用? 以及应用 (琐碎知识点整理) </title>
</head>
<style>
.w_content-shel {
background-color: burlywood;
padding: 36px 0;
}
/* 1. 插入纯文字 */
.w_com-font {
background-color: cadetblue;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_com-font p {
font-size: 32px;
line-height: 36px;
}
.w_com-font p::after {
content: "演示插入内容";
font-size: 12px;
color: brown;
}
.w_com-font p::after {
/* content: none; */
/* content: normal; */
font-size: 12px;
color: brown;
}
/* 2. 嵌入文字符号 */
/* 第三种 */
.w_con-symbol {
background-color: darkorange;
padding: 10px 24px;
margin-bottom: 24px;
}
.w_con-symbol p {
/* 利用元素的 quote s属性指定文字符号 */
quotes:"(" ")";
}
.w_con-symbol p::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
.w_con-symbol p::after {
content: close-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
/* 第二种 */
.w_con-symbol h3 {
/* 添加双引号要转义 */
quotes:"\\"" "\\"";
}
.w_con-symbol h3::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
.w_con-symbol h3::after {
content: close-quote;
font-size: 12px;
color: #FFF;
font-weight: 900;
}
/* 第三种 */
.w_con-symbol h5 {
quotes: '提问: "' '"' 'kjk';
/* quotes: '"' 'kjk'; */
}
.w_con-symbol h5::before {
content: open-quote;
font-size: 12px;
color: #FFF;
font-weight: 900CSS属性content有什么作用呢？有哪些场景可以用到？