今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果。但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后找到了一个比较全的,在这里进行归纳备忘,为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。
因为这些字符属于unicode字符集,所以,我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式;
还有一点需要注意的是,部分字符在不同浏览器中显示的效果不同,所以在使用的时候,需要自己在不同的浏览器中进行试验。在苹果和安卓等系统的智能设备下的识别度也比较差,所有希望慎用。
废话不多说上干货:
各种箭头
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
⇠
|
8672
|
21E0
|
⇢
|
8674
|
21E2
|
⇡
|
8673
|
21E1
|
⇣
|
8675
|
21E3
|
↞
|
8606
|
219E
|
↠
|
8608
|
21A0
|
↟
|
8607
|
219F
|
↡
|
8609
|
21A1
|
←
|
8592
|
2190
|
→
|
8594
|
2192
|
↑
|
8593
|
2191
|
↓
|
8595
|
2193
|
↔
|
8596
|
2194
|
↕
|
8597
|
2195
|
⇄
|
8644
|
21C4
|
⇅
|
8645
|
21C5
|
↢
|
8610
|
21A2
|
↣
|
8611
|
21A3
|
⇞
|
8670
|
21DE
|
⇟
|
8671
|
21DF
|
↫
|
8619
|
21AB
|
↬
|
8620
|
21AC
|
⇜
|
8668
|
21DC
|
⇝
|
8669
|
21DD
|
↚
|
8602
|
219A
|
↛
|
8603
|
219B
|
↮
|
8622
|
21AE
|
↭
|
8621
|
21AD
|
形状
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
⇦
|
8678
|
21E6
|
⇨
|
8680
|
21E8
|
⇧
|
8679
|
21E7
|
⇩
|
8681
|
21E9
|
↷
|
8631
|
21B7
|
↶
|
8630
|
21B6
|
↻
|
8635
|
21BB
|
↺
|
8634
|
21BA
|
⟳
|
10227
|
27F3
|
⟲
|
10226
|
27F2
|
⟰
|
10224
|
27F0
|
⟱
|
10225
|
27F1
|
↵
|
8629
|
21B5
|
↯
|
8623
|
21AF
|
⇵
|
8693
|
21F5
|
向右的箭头
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
➔
|
10132
|
2794
|
➙
|
10137
|
2799
|
➨
|
10152
|
27A8
|
➲
|
10162
|
27B2
|
➜
|
10140
|
279C
|
➞
|
10142
|
279E
|
➟
|
10143
|
279F
|
➠
|
10144
|
27A0
|
➤
|
10148
|
27A4
|
➥
|
10149
|
27A5
|
➦
|
10150
|
27A6
|
➧
|
10151
|
27A7
|
➵
|
10165
|
27B5
|
➸
|
10168
|
27B8
|
➼
|
10172
|
27BC
|
➽
|
10173
|
27BD
|
➺
|
10170
|
27BA
|
➳
|
10163
|
27B3
|
➾
|
10174
|
27BE
|
基本形状
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
▲
|
9650
|
25B2
|
►
|
9658
|
25BA
|
▼
|
9660
|
25BC
|
◄
|
9668
|
25C4
|
❤
|
10084
|
2764
|
✈
|
9992
|
2708
|
★
|
9733
|
2605
|
✦
|
10022
|
2726
|
☀
|
9728
|
2600
|
◆
|
9670
|
25C6
|
◈
|
9672
|
25C8
|
▣
|
9635
|
25A3
|
标点
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
«
|
171
|
00AB
|
»
|
187
|
00BB
|
‹
|
139
|
008B
|
›
|
155
|
009B
|
“
|
8220
|
201C
|
”
|
8221
|
201D
|
‘
|
8216
|
2018
|
’
|
8217
|
2019
|
•
|
8226
|
2022
|
◦
|
9702
|
25E6
|
¡
|
161
|
00A1
|
¿
|
191
|
00BF
|
℅
|
8453
|
2105
|
№
|
8470
|
2116
|
&
|
38
|
0026
|
@
|
64
|
0040
|
℞
|
8478
|
211E
|
℃
|
8451
|
2103
|
℉
|
8457
|
2109
|
°
|
176
|
00B0
|
|
124
|
007C
|
¦
|
166
|
00A6
|
–
|
8211
|
2013
|
—
|
8212
|
2014
|
…
|
8230
|
2026
|
¶
|
182
|
00B6
|
∼
|
8764
|
223C
|
≠
|
8800
|
2260
|
法律符号
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
®
|
174
|
00AE
|
©
|
169
|
00A9
|
℗
|
8471
|
2117
|
™
|
153
|
0099
|
℠
|
8480
|
2120
|
货币
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
$
|
36
|
0024
|
¢
|
162
|
00A2
|
£
|
163
|
00A3
|
¤
|
164
|
00A4
|
€
|
8364
|
20AC
|
¥
|
165
|
00A5
|
₱
|
8369
|
20B1
|
₹
|
8377
|
20B9
|
数学
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
½
|
189
|
00BD
|
¼
|
188
|
00BC
|
¾
|
190
|
00BE
|
⅓
|
8531
|
2153
|
⅔
|
8532
|
2154
|
⅛
|
8539
|
215B
|
⅜
|
8540
|
215C
|
⅝
|
8541
|
215D
|
‰
|
8240
|
2030
|
%
|
37
|
0025
|
<
|
60
|
003C
|
>
|
62
|
003E
|
音乐符号
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
♩
|
9833
|
2669
|
♪
|
9834
|
266A
|
♫
|
9835
|
266B
|
♬
|
9836
|
266C
|
♭
|
9837
|
266D
|
♯
|
9839
|
266F
|
对号、错号
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
空格
|
160
|
00A0
|
☐
|
9744
|
2610
|
☑
|
9745
|
2611
|
☒
|
9746
|
2612
|
✓
|
10003
|
2713
|
✔
|
10004
|
2714
|
✕
|
10005
|
10005
|
✖
|
10006
|
2716
|
✗
|
10007
|
2717
|
✘
|
10008
|
2718
|
十字
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
☨
|
9768
|
2628
|
☩
|
9769
|
2629
|
✝
|
10013
|
271D
|
✞
|
10014
|
271E
|
✟
|
10015
|
271F
|
✠
|
10016
|
2720
|
✚
|
10010
|
271A
|
†
|
8224
|
2020
|
✢
|
10018
|
2722
|
✤
|
10020
|
2724
|
✣
|
10019
|
2723
|
✥
|
10021
|
2725
|
星星、星号、雪花
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
★
|
9733
|
2605
|
✭
|
10029
|
272D
|
✮
|
10030
|
272E
|
☆
|
9734
|
2606
|
✪
|
10026
|
272A
|
✡
|
10017
|
2721
|
✯
|
10031
|
272F
|
✵
|
10037
|
2735
|
✶
|
10038
|
2736
|
✸
|
10040
|
2738
|
✹
|
10041
|
2739
|
✺
|
10042
|
273A
|
✱
|
10033
|
2731
|
✲
|
10034
|
2732
|
✴
|
10036
|
2734
|
✳
|
10035
|
2733
|
✻
|
10043
|
273B
|
✽
|
10045
|
273D
|
❋
|
10059
|
274B
|
❆
|
10054
|
2746
|
❄
|
10052
|
2744
|
❅
|
10053
|
2745
|
杂项
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
☻
|
9787
|
263B
|
☺
|
9786
|
263A
|
☹
|
9785
|
2639
|
✉
|
9993
|
2709
|
☎
|
9742
|
260E
|
☏
|
9743
|
260F
|
✆
|
9990
|
2706
|
�
|
65533
|
FFFD
|
☁
|
9729
|
2601
|
☂
|
9730
|
2602
|
❄
|
10052
|
2744
|
☃
|
9731
|
2603
|
❈
|
10056
|
2748
|
✿
|
10047
|
273F
|
❀
|
10048
|
2740
|
❁
|
10049
|
2741
|
☘
|
9752
|
2618
|
❦
|
10086
|
2766
|
☕
|
9749
|
9749
|
❂
|
10050
|
2742
|
☥
|
9765
|
2625
|
☮
|
9774
|
262E
|
☯
|
9775
|
262F
|
☪
|
9770
|
262A
|
☤
|
9764
|
2624
|
✄
|
9988
|
2704
|
✂
|
9986
|
2702
|
☸
|
9784
|
2638
|
⚓
|
9875
|
2693
|
☣
|
9763
|
2623
|
⚠
|
9888
|
26A0
|
⚡
|
9889
|
26A1
|
☢
|
9762
|
2622
|
♻
|
9851
|
267B
|
♿
|
9855
|
267F
|
☠
|
9760
|
2620
|
手型、铅笔、笔
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
☜
|
9756
|
261C
|
☞
|
9758
|
261E
|
☝
|
9757
|
261D
|
☟
|
9759
|
261F
|
✌
|
9996
|
270C
|
✍
|
9997
|
270D
|
✎
|
9998
|
270E
|
✐
|
10000
|
2710
|
✏
|
9999
|
270F
|
✑
|
10001
|
2711
|
✒
|
10002
|
2712
|
天空、植物
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
☽
|
9789
|
263D
|
☾
|
9790
|
263E
|
♂
|
9794
|
2642
|
♀
|
9792
|
2640
|
☿
|
9791
|
263F
|
♁
|
9793
|
2641
|
♃
|
9795
|
2643
|
♄
|
9796
|
2644
|
♅
|
9797
|
2645
|
♆
|
9798
|
2646
|
♇
|
9799
|
2647
|
星座
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
♈
|
9800
|
2648
|
♉
|
9801
|
2649
|
♊
|
9802
|
264A
|
♋
|
9803
|
264B
|
♌
|
9804
|
264C
|
♍
|
9805
|
264D
|
♎
|
9806
|
264E
|
♏
|
9807
|
264F
|
♑
|
9809
|
2651
|
♒
|
9810
|
2652
|
♓
|
9811
|
2653
|
象棋,扑克牌
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
♚
|
9818
|
265A
|
♛
|
9819
|
265B
|
♜
|
9820
|
265C
|
♝
|
9821
|
265D
|
♞
|
9822
|
265E
|
♟
|
9823
|
265F
|
♔
|
9812
|
2654
|
♕
|
9813
|
2655
|
♖
|
9814
|
2656
|
♗
|
9815
|
2657
|
♘
|
9816
|
2658
|
♙
|
9817
|
2659
|
♠
|
9824
|
2660
|
♣
|
9827
|
2663
|
♥
|
9829
|
2665
|
♦
|
9830
|
2666
|
♤
|
9828
|
2664
|
♧
|
9831
|
2667
|
♡
|
9825
|
2661
|
♢
|
9826
|
2662
|
希腊字母
图形样式
|
用于HTML(在字符前加 &# )
|
用于 CSS (在字符前加 \ ) 和 JavaScript(在字符前加 \u )
|
Α
|
913
|
0391
|
Β
|
914
|
0392
|
Γ
|
915
|
0393
|
Δ
|
916
|
0394
|
Ε
|
917
|
0395
|
Ζ
|
918
|
0396
|
Η
|
919
|
0397
|
Θ
|
920
|
0398
|
Ι
|
921
|
0399
|
Κ
|
922
|
039A
|
Λ
|
923
|
039B
|
Μ
|
924
|
039C
|
Ν
|
925
|
039D
|
Ξ
|
926
|
039E
|
Ο
|
927
|
039F
|
Π
|
928
|
03A0
|
Ρ
|
929
|
03A1
|
Σ
|
931
|
03A3
|
Τ
|
932
|
03A4
|
Υ
|
933
|
03A5
|
Φ
|
934
|
03A6
|
Χ
|
935
|
03A7
|
Ψ
|
936
|
03A8
|
Ω
|
937
|
03A9
|
常用的HTML和CSS content属性特殊字符归纳相关推荐
- [css] CSS content属性特殊字符有哪些?
[css] CSS content属性特殊字符有哪些? 今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果.但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后 ...
- css的content属性,以及如何通过css content属性实现css计数器?
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
- html中content属性,CSS content 属性 | 菜鸟教程
content 属性遵循一个原则:CSS 仅仅改变样式.因此,所加入的内容不会在 HTML 代码中直接展现:事实上,打开 F12 调试会发现浏览器把 before 作为一个特殊的节点嵌入到目标元素中. ...
- html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧
- CSS的content属性怎么用?
CSS中的Content属性用于动态生成内容(在运行时):该属性可以与伪元素::before或::after一起使用,用于插入生成内容.下面本篇文章就来给大家介绍一下,希望对大家有所帮助. CSS c ...
- js table 生成序号_CSS Counter 以及 CSS content 内容生成技术的实用价值
写这篇文章是因为,昨天在组里临时做了个分享,觉得还蛮有意思的,所以想记录下来.分享内容是讲 CSS Counter 的,从怎么使用它,到它的实际使用价值,以及一些延伸的用法.那我们直接进入正题. 怎么 ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- css4个伪元素,CSS_CSS3中的content属性使用示例,CSS中主要的伪元素有四个:befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
- [css] css的属性content有什么作用呢?有哪些场景可以用到?
[css] css的属性content有什么作用呢?有哪些场景可以用到? content属性与 ::before 及 ::after 伪元素配合使用生成文本内容通过attr()将选择器对象的属性作为字 ...
最新文章
- 2022-2028年中国B2C电子商务市场投资分析及前景预测报告
- JAVA多线程之中断机制(如何处理中断?)
- 深度学习: mAP (Mean Average Precision)
- 中国磁性材料行业竞争趋势及供需前景分析报告2021年版
- 【机器学习基础】数学推导+纯Python实现机器学习算法23:kmeans聚类
- php 逻辑与运算符使用说明
- 手机mstsc远程工具_ToDesk — 免费不限速的远程控制软件
- html信号动画,HTML5带音效的雷达检测信号动画
- 数据结构——划分树模板
- linux中的特殊符号 (|) 管道。
- 1731: [Usaco2005 dec]Layout 排队布局*
- java string to bit_Java Convert String to Binary
- ADB下载及常用命令
- 树莓派蜂鸣器python代码_树莓派之蜂鸣器模块基础应用
- 各个版本chrome允许加载使用flash的方法
- 计算机图形学中几何变换的定义,计算机图形学 实验7 三维几何变换(MFC中)
- 输入N,打印对应N行的图案。
- 第二章 前端开发——JavaScript
- 增益 Gain 分贝 dB
- 微信小程序-编写图标的方法
热门文章
- 计算机一级考试试题没做完 有分吗,全国计算机一级考试选择题有多项选择题吗,判断题有没有的?还有每个部分各占多少分?...
- tp5 三行代码实现调用redis底层的方法
- 通达OA MQ和Redis服务无法启动问题的处理(图文)
- CSS如何使得img图片设置无色透明
- 什么样的人才是一个成熟的人?
- iOS获取视频图片(视屏截图)
- 华为LAB实验室3-机器学习实验:(线性回归)美国King County房价预测训练赛
- 华为LAB实验室4-朴素贝叶斯
- Spring MVC参数处理--gzip和deflate的几点区别
- 〖Python自动化办公篇⑱〗- PPT 文件自动化 - PPT 的读取