做有态度的前端团队

网易FEG前端团队

CSS3的content属性1

作者: gzheyunying 日期: 2017-04-25

323330

CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。
1、插入纯文字
html：

<h1>这是h1</h1>
<h2>这是h2</h2>

css：

h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

效果图：

2、嵌入文字符号
可以使用content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote 用于添加开始的文字符号，close-quote 用于添加结束的文字符号。修改上述的css:

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

效果图：

3、插入图片
html：

<h3>这是h3</h3>

css：

h3::after{
    content:url(http://webinput.nie.netease.com/img/tx3/logo.png)
}

4、插入元素的属性值
html：

<a href="http://www.163.com">这是链接</a>

css：

a:after{
    content:attr(href);
}

手机阅读请扫描下方二维码：

none

上一篇：基于NodeJs的自定义命令行图片压缩工具制作下一篇：移动端的Developer Tools

已有 182 条评论

admin

2020-10-23 09:52:01

12345678

回复
1. admin
  
  2020-11-28 13:59:17
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 14:04:00
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:22:15
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 15:31:15
    
    12345678
    
    admin
    
    2020-11-28 14:39:12
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:42:02
    
    12345678
    
    admin
    
    2020-11-28 15:13:36
    
    12345678
    
    回复
    
    1
    
    2023-09-11 17:48:19
    
    555
    
    回复
    
    1
    
    2023-09-11 17:56:25
    
    1
    
    回复
    
    1
    
    2024-07-02 16:54:36
    
    1
    
    回复
    
    1
    
    2024-07-15 20:04:46
    
    1
    
    回复
  2. admin
    
    2020-11-28 14:09:42
    
    12345678
    
    回复
  3. admin
    
    2020-11-28 14:12:24
    
    12345678
    
    回复
  4. admin
    
    2020-11-28 14:20:44
    
    12345678
    
    回复
  5. admin
    
    2020-11-28 14:27:08
    
    12345678
    
    回复
  6. admin
    
    2020-11-28 14:31:03
    
    12345678
    
    回复
  7. admin
    
    2020-11-28 14:36:19
    
    12345678
    
    回复
  8. admin
    
    2020-11-28 14:52:13
    
    12345678
    
    回复
  9. admin
    
    2020-11-28 15:04:34
    
    12345678
    
    回复
  10. admin
    
    2020-11-28 15:10:20
    
    12345678
    
    回复
  11. admin
    
    2020-11-28 15:12:09
    
    12345678
    
    回复
  12. admin
    
    2020-11-28 15:20:25
    
    12345678
    
    回复
  13. admin
    
    2020-11-28 15:26:07
    
    12345678
    
    回复
  14. admin
    
    2020-11-28 15:29:59
    
    12345678
    
    回复
  15. admin
    
    2020-11-28 15:36:52
    
    12345678
    
    回复
  16. admin
    
    2020-11-28 15:48:36
    
    12345678
    
    回复
  17. 1
    
    2023-01-25 14:02:04
    
    1
    
    回复
  18. 1
    
    2023-01-25 14:02:04
    
    1
    
    回复
  19. 1
    
    2023-03-18 08:16:53
    
    555
    
    回复
  20. 1
    
    2023-03-21 02:49:35
    
    555
    
    回复
  21. 1
    
    2023-03-24 13:36:41
    
    555
    
    回复
  22. 1
    
    2023-04-01 02:20:33
    
    555
    
    回复
  23. 1
    
    2023-04-04 21:26:39
    
    555
    
    回复
  24. 1
    
    2023-09-12 00:27:32
    
    555
    
    回复
  25. 1
    
    2023-09-14 19:36:20
    
    555
    
    回复
    
    1
    
    2025-04-13 10:21:13
    
    1
    
    回复
  26. 1
    
    2023-09-15 18:40:03
    
    555
    
    回复
  27. 1
    
    2025-03-12 10:58:03
    
    1
    
    回复
2. admin
  
  2020-11-28 14:50:50
  
  12345678
  
  回复
3. admin
  
  2020-11-28 17:07:39
  
  12345678
  
  回复
4. admin
  
  2020-11-28 17:07:39
  
  12345678
  
  回复
5. admin
  
  2020-11-28 17:07:39
  
  12345678
  
  回复
6. admin
  
  2020-11-28 17:07:39
  
  12345678
  
  回复
7. admin
  
  2020-11-28 17:08:39
  
  12345678
  
  回复
8. admin
  
  2020-11-28 17:08:39
  
  12345678
  
  回复
9. admin
  
  2020-11-28 17:08:39
  
  12345678
  
  回复
10. 1
  
  2023-01-25 11:53:14
  
  1
  
  回复
  1. 1
    
    2025-04-13 14:05:49
    
    1
    
    回复
11. 1
  
  2023-01-25 11:53:14
  
  1
  
  回复
12. 1
  
  2023-03-18 08:29:19
  
  1
  
  回复
13. 1
  
  2023-03-24 14:24:32
  
  1
  
  回复
14. 1
  
  2023-03-26 12:58:52
  
  1
  
  回复
15. 1
  
  2023-04-01 02:41:57
  
  1
  
  回复
16. 1
  
  2023-04-03 11:12:17
  
  1
  
  回复
17. 1
  
  2023-04-04 21:57:33
  
  1
  
  回复
18. 1
  
  2023-09-11 17:31:59
  
  1
  
  回复
19. 1
  
  2023-09-14 20:39:44
  
  1
  
  回复
20. 1
  
  2023-09-15 19:38:40
  
  1
  
  回复
21. 1
  
  2023-09-23 03:25:17
  
  1
  
  回复
22. 1
  
  2024-03-13 10:07:26
  
  1
  
  回复
23. 1
  
  2024-07-02 16:53:07
  
  1
  
  回复
24. 1
  
  2024-07-15 20:03:27
  
  1
  
  回复
25. admin
  
  2024-11-16 03:57:21
  
  admin
  
  回复
26. 1
  
  2025-03-12 10:48:37
  
  1
  
  回复
admin

2020-10-23 09:56:40

12345678
expr 806914455 + 858653302

回复
1. admin
  
  2020-11-28 14:01:23
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 14:15:41
    
    12345678
    
    回复
  2. admin
    
    2020-11-28 14:23:19
    
    12345678
    
    回复
2. admin
  
  2020-11-28 14:02:28
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 14:11:03
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:13:27
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:14:27
    
    12345678
    
    admin
    
    2020-11-28 14:49:40
    
    12345678
    
    回复
3. admin
  
  2020-11-28 14:11:03
  
  12345678
  
  回复
  1. 1
    
    2025-04-13 14:06:49
    
    1
    
    回复
4. admin
  
  2020-11-28 14:28:13
  
  12345678
  
  回复
admin

2020-10-23 09:56:40

mkxdcnoglsvpmfgoswuz

回复
1. admin
  
  2020-10-23 10:47:30
  
  12345678
  
  回复
2. admin
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
  1. admin
    
    2020-11-28 14:00:22
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 14:32:27
    
    12345678
    
    回复
    
    admin
    
    2020-11-28 15:07:50
    
    12345678
    
    admin
    
    2020-11-28 15:14:55
    
    12345678
    
    admin
    
    2020-11-28 15:32:31
    
    12345678
    
    admin
    
    2020-11-28 15:38:10
    
    12345678
    
    admin
    
    2020-11-28 15:50:42
    
    12345678
3. kzbzlmyecyotohkanjho
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
4. admin%0d%0aCRLF-Header:CRLF-Value
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
5. admin
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
6. admin
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
7. admin
  
  2020-10-23 10:55:51
  
  12345678
  
  回复
admin

2020-10-23 09:56:40

12345678 |expr 858376622 + 815729799

回复
admin%0d%0aCRLF-Header:CRLF-Value

2020-10-23 09:56:40

12345678

回复
mkxdcnoglsvpmfgoswuz

2020-10-23 09:56:40

12345678

回复
admin

2020-10-23 09:56:40

12345678 $(expr 876098980 + 948390788)

回复
admin

2020-10-23 09:56:40

12345678 &set /A 969141171+976959967

回复
admin

2020-10-23 09:56:40

12345678

回复
admin

2020-10-23 09:56:40

${@var_dump(md5(159382564))};

回复
admin

2020-10-23 09:56:40

'-var_dump(md5(885049313))-'

回复
admin

2020-10-23 09:56:40

12345678

回复
admin

2020-10-23 09:58:03

12345678

回复
admin

2020-10-23 09:58:03

12345678

回复
admin

2020-10-23 09:58:03

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
admin

2020-10-23 10:56:51

12345678

回复
1. 1
  
  2021-11-01 02:40:43
  
  1
  
  回复
2. 1
  
  2021-11-01 03:04:14
  
  %{42020*42989}
  
  回复
3. %{40508*40713}
  
  2021-11-01 03:04:14
  
  1
  
  回复
4. 1
  
  2021-11-01 03:04:14
  
  1
  
  回复
5. 1
  
  2021-11-01 03:04:14
  
  '+(44219*40245)+'
  
  回复
1

2021-11-01 03:04:14

1

回复
1

2021-11-01 03:04:14

1

回复
1. 1
  
  2022-03-06 03:21:05
  
  1
  
  回复
2. 1
  
  2022-03-06 10:09:05
  
  1
  
  回复
3. 1
  
  2022-03-06 10:10:05
  
  1
  
  回复
4. 1
  
  2022-03-06 10:11:05
  
  1
  
  回复
5. 1
  
  2022-03-06 10:11:05
  
  1
  
  回复
  1. 1
    
    2022-09-27 09:13:18
    
    1
    
    回复
1

2023-01-25 09:07:28

1

回复
1

2023-01-25 09:07:28

1

回复
1

2023-01-25 13:55:46

555

回复
1

2023-02-28 03:42:21

1

回复
1

2023-02-28 03:49:44

555

回复
1. 1
  
  2023-03-04 10:16:24
  
  1
  
  回复
1

2023-03-18 08:06:31

1

回复
1

2023-03-18 08:12:00

555

回复
1. 1
  
  2023-03-20 11:59:58
  
  1
  
  回复
2. 1%0d%0aCRLF-Header:CRLF-Value
  
  2023-03-20 12:39:35
  
  1
  
  回复
3. 1
  
  2023-03-20 12:40:35
  
  1
  
  回复
4. 1
  
  2023-03-20 12:40:35
  
  1
  
  回复
1

2023-03-20 23:57:00

1

回复
1

2023-03-21 04:11:10

555

回复
1

2023-03-24 13:34:59

1

回复
1

2023-03-24 14:33:42

555

回复
1

2023-03-26 12:44:59

1

回复
1

2023-03-26 12:44:59

1

回复
1

2023-04-01 02:19:08

1

回复
1

2023-04-03 09:15:23

1

回复
1

2023-04-04 21:24:35

1

回复
1

2023-04-04 21:24:35

1

回复
1

2023-04-04 21:28:06

555

回复
1

2023-06-23 06:41:00

1

回复
1

2023-06-23 06:54:24

555

回复
1

2023-09-11 17:29:38

1

回复
1

2023-09-11 19:43:42

555

回复
1

2023-09-12 00:19:58

1

回复
1

2023-09-14 19:29:03

1

回复
1

2023-09-14 22:27:54

555

回复
1

2023-09-15 18:19:51

1

回复
1

2023-09-15 21:32:20

555

回复
1

2023-09-16 03:52:14

1

回复
1

2023-09-23 02:08:59

1

回复
1

2023-10-05 05:38:42

1

回复
1

2024-03-13 08:28:52

1

回复
1

2024-07-02 15:13:53

1

回复
1

2024-07-02 15:15:15

1

回复
1

2024-07-02 15:15:15

1

回复
1

2024-07-02 15:15:15

1

回复
1

2024-07-15 18:37:30

1

回复
1

2024-07-15 18:38:30

1

回复
1

2024-07-15 18:39:34

1

回复
1

2024-07-16 04:05:55

1

回复
1

2024-07-16 04:05:55

1

回复
1. 1
  
  2024-08-09 06:59:44
  
  1
  
  回复
1

2024-08-28 05:18:23

1

回复
admin

2024-11-16 03:56:14

admin

回复
1

2025-03-12 10:40:21

1

回复
1

2025-03-12 10:42:13

1

回复
1

2025-03-13 01:27:02

1

回复
1

2025-04-13 10:20:01

1

回复
1

2025-04-13 10:22:13

1

回复
1

2025-04-13 14:04:49

1

回复
1

2025-04-13 14:06:49

1

回复

取消回复

做有态度的前端团队

CSS3的content属性1

已有 182 条评论

添加新评论

按日期分类