before和after的用法

转载：https://blog.csdn.net/lurr88/article/details/79754811

一、介绍

css3为了区分伪类和伪元素，伪元素采用双冒号写法。(:before和:after是在CSS2中提出来的，CSS3中的写法是::before和::after)

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

Note:

1、这些特殊字符的html，js和css的写法是不同的，如下

⇠ 箭头类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
⇠	&#8672	u21E0	21E0	⇢	&#8674	u21E2	21E2
⇡	&#8673	u21E1	21E1	⇣	&#8675	u21E3	21E3
↞	&#8606	u219E	219E	↠	&#8608	u21A0	21A0
↟	&#8607	u219F	219F	↡	&#8609	u21A1	21A1
←	&#8592	u2190	2190	→	&#8594	u2192	2192
↑	&#8593	u2191	2191	↓	&#8595	u2193	2193
↔	&#8596	u2194	2194	↕	&#8597	u2195	2195
⇄	&#8644	u21C4	21C4	⇅	&#8645	u21C5	21C5
↢	&#8610	u21A2	21A2	↣	&#8611	u21A3	21A3
⇞	&#8670	u21DE	21DE	⇟	&#8671	u21DF	21DF
↫	&#8619	u21AB	21AB	↬	&#8620	u21AC	21AC
⇜	&#8668	u21DC	21DC	⇝	&#8669	u21DD	21DD
↚	&#8602	u219A	219A	↛	&#8603	u219B	219B
↮	&#8622	u21AE	21AE	↭	&#8621	u21AD	21AD
⇦	&#8678	u21E6	21E6	⇨	&#8680	u21E8	21E8
⇧	&#8679	u21E7	21E7	⇩	&#8681	u21E9	21E9
▲	&#9650	u25B2	25B2	►	&#9658	u25BA	25BA
▼	&#9660	u25BC	25BC	◄	&#9668	u25C4	25C4
➔	&#10132	u2794	2794	➙	&#10137	u2799	2799
➨	&#10152	u27A8	27A8	➲	&#10162	u27B2	27B2
➜	&#10140	u279C	279C	➞	&#10142	u279E	279E
➟	&#10143	u279F	279F	➠	&#10144	u27A0	27A0
➤	&#10148	u27A4	27A4	➥	&#10149	u27A5	27A5
➦	&#10150	u27A6	27A6	➧	&#10151	u27A7	27A7
➵	&#10165	u27B5	27B5	➸	&#10168	u27B8	27B8
➼	&#10172	u27BC	27BC	➽	&#10173	u27BD	27BD
➺	&#10170	u27BA	27BA	➳	&#10163	u27B3	27B3
↷	&#8631	u21B7	21B7	↶	&#8630	u21B6	21B6
↻	&#8635	u21BB	21BB	↺	&#8634	u21BA	21BA
↵	&#8629	u21B5	21B5	↯	&#8623	u21AF	21AF
➾	&#10174	u27BE	27BE

❤ 基本形状类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
❤	&#10084	u2764	2764	✈	&#9992	u2708	2708
★	&#9733	u2605	2605	✦	&#10022	u2726	2726
☀	&#9728	u2600	2600	◆	&#9670	u25C6	25C6
◈	&#9672	u25C8	25C8	▣	&#9635	u25A3	25A3
☻	&#9787	u263B	263B	☺	&#9786	u263A	263A
☹	&#9785	u2639	2639	✉	&#9993	u2709	2709
☎	&#9742	u260E	260E	☏	&#9743	u260F	260F
✆	&#9990	u2706	2706	�	&#65533	uFFFD	FFFD
☁	&#9729	u2601	2601	☂	&#9730	u2602	2602
❄	&#10052	u2744	2744	☃	&#9731	u2603	2603
❈	&#10056	u2748	2748	✿	&#10047	u273F	273F
❀	&#10048	u2740	2740	❁	&#10049	u2741	2741
☘	&#9752	u2618	2618	❦	&#10086	u2766	2766
☕	&#9749	u9749	9749	❂	&#10050	u2742	2742
☥	&#9765	u2625	2625	☮	&#9774	u262E	262E
☯	&#9775	u262F	262F	☪	&#9770	u262A	262A
☤	&#9764	u2624	2624	✄	&#9988	u2704	2704
✂	&#9986	u2702	2702	☸	&#9784	u2638	2638
⚓	&#9875	u2693	2693	☣	&#9763	u2623	2623
⚠	&#9888	u26A0	26A0	⚡	&#9889	u26A1	26A1
☢	&#9762	u2622	2622	♻	&#9851	u267B	267B
♿	&#9855	u267F	267F	☠	&#9760	u2620	2620

¥ 货币类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
$	&#36	u0024	024	¢	&#162	u00A2	0A2
£	&#163	u00A3	0A3	¤	&#164	u00A4	0A4
€	&#8364	u20AC	20AC	¥	&#165	u00A5	0A5
₱	&#8369	u20B1	20B1	₹	&#8377	u20B9	20B9

½ 数学类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
½	&#189	u00BD	0BD	¼	&#188	u00BC	0BC
¾	&#190	u00BE	0BE	⅓	&#8531	u2153	2153
⅔	&#8532	u2154	2154	⅛	&#8539	u215B	215B
⅜	&#8540	u215C	215C	⅝	&#8541	u215D	215D
‰	&#8240	u2030	2030	%	&#37	u0025	025
<	&#60	u003C	03C	>	&#62	u003E	03E

♫ 音乐符号类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
♩	&#9833	u2669	2669	♪	&#9834	u266A	266A
♫	&#9835	u266B	266B	♬	&#9836	u266C	266C
♭	&#9837	u266D	266D	♯	&#9839	u266F	266F

✖ 对错号

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
	&#160	u00A0	0A0	☐	&#9744	u2610	2610
☑	&#9745	u2611	2611	☒	&#9746	u2612	2612
✓	&#10003	u2713	2713	✔	&#10004	u2714	2714
✕	&#10005	u10005	10005	✖	&#10006	u2716	2716
✗	&#10007	u2717	2717	✘	&#10008	u2718	2718

★ 全都是星星

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
★	&#9733	u2605	2605	✭	&#10029	u272D	272D
✮	&#10030	u272E	272E	☆	&#9734	u2606	2606
✪	&#10026	u272A	272A	✡	&#10017	u2721	2721
✯	&#10031	u272F	272F	✵	&#10037	u2735	2735
✶	&#10038	u2736	2736	✸	&#10040	u2738	2738
✹	&#10041	u2739	2739	✺	&#10042	u273A	273A
✱	&#10033	u2731	2731	✲	&#10034	u2732	2732
✴	&#10036	u2734	2734	✳	&#10035	u2733	2733
✻	&#10043	u273B	273B	✽	&#10045	u273D	273D
❋	&#10059	u274B	274B	❆	&#10054	u2746	2746
❄	&#10052	u2744	2744	❅	&#10053	u2745	2745

♒ 星座类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
♈	&#9800	u2648	2648	♉	&#9801	u2649	2649
♊	&#9802	u264A	264A	♋	&#9803	u264B	264B
♌	&#9804	u264C	264C	♍	&#9805	u264D	264D
♎	&#9806	u264E	264E	♏	&#9807	u264F	264F
♐	&#9808	u2650	2650	♑	&#9809	u2651	2651
♒	&#9810	u2652	2652	♓	&#9811	u2653	2653

♚ 国际象棋类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
♚	&#9818	u265A	265A	♛	&#9819	u265B	265B
♜	&#9820	u265C	265C	♝	&#9821	u265D	265D
♞	&#9822	u265E	265E	♟	&#9823	u265F	265F
♔	&#9812	u2654	2654	♕	&#9813	u2655	2655
♖	&#9814	u2656	2656	♗	&#9815	u2657	2657
♘	&#9816	u2658	2658	♙	&#9817	u2659	2659

♣ 扑克牌类

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
♠	&#9824	u2660	2660	♣	&#9827	u2663	2663
♥	&#9829	u2665	2665	♦	&#9830	u2666	2666
♤	&#9828	u2664	2664	♧	&#9831	u2667	2667
♡	&#9825	u2661	2661	♢	&#9826	u2662	2662

Ω 希腊字母

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
Α	&#913	u0391	391	Β	&#914	u0392	392
Γ	&#915	u0393	393	Δ	&#916	u0394	394
Ε	&#917	u0395	395	Ζ	&#918	u0396	396
Η	&#919	u0397	397	Θ	&#920	u0398	398
Ι	&#921	u0399	399	Κ	&#922	u039A	39A
Λ	&#923	u039B	39B	Μ	&#924	u039C	39C
Ν	&#925	u039D	39D	Ξ	&#926	u039E	39E
Ο	&#927	u039F	39F	Π	&#928	u03A0	3A0
Ρ	&#929	u03A1	3A1	Σ	&#931	u03A3	3A3
Τ	&#932	u03A4	3A4	Υ	&#933	u03A5	3A5
Φ	&#934	u03A6	3A6	Χ	&#935	u03A7	3A7
Ψ	&#936	u03A8	3A8	Ω	&#937	u03A9	3A9

☩ 十字

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
☨	&#9768	u2628	2628	☩	&#9769	u2629	2629
✝	&#10013	u271D	271D	✞	&#10014	u271E	271E
✟	&#10015	u271F	271F	✠	&#10016	u2720	2720
✚	&#10010	u271A	271A	†	&#8224	u2020	2020
✢	&#10018	u2722	2722	✤	&#10020	u2724	2724
✣	&#10019	u2723	2723	✥	&#10021	u2725	2725

© 法律符号

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
®	&#174	u00AE	0AE	©	&#169	u00A9	0A9
℗	&#8471	u2117	2117	™	&#153	u0099	099
℠	&#8480	u2120	2120

@ 标点和符号

符号	UNICODE			符号	UNICODE
符号	HTML	JS	CSS	符号	HTML	JS	CSS
«	&#171	u00AB	0AB	»	&#187	u00BB	0BB
‹	&#139	u008B	08B	›	&#155	u009B	09B
“	&#8220	u201C	201C	”	&#8221	u201D	201D
‘	&#8216	u2018	2018	’	&#8217	u2019	2019
•	&#8226	u2022	2022	◦	&#9702	u25E6	25E6
¡	&#161	u00A1	0A1	¿	&#191	u00BF	0BF
℅	&#8453	u2105	2105	№	&#8470	u2116	2116
&	&#38	u0026	026	@	&#64	u0040	040
℞	&#8478	u211E	211E	℃	&#8451	u2103	2103
℉	&#8457	u2109	2109	°	&#176	u00B0	0B0
\|	&#124	u007C	07C	¦	&#166	u00A6	0A6
–	&#8211	u2013	2013	—	&#8212	u2014	2014
…	&#8230	u2026	2026	¶	&#182	u00B6	0B6
∼	&#8764	u223C	223C	≠	&#8800	u2260

2、创建的伪元素默认是在所依附的元素之上的，我们可以使用z-index:-1;把它放到下面

去

3、input、img、iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。

二、content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值：

1、string

2、attr——调用当前元素的属性

eg:

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

运行结果：

3、URL/URI——引用媒体文件

eg:content:url("https://www.baidu.com/img/baidu_jgylogo3.gif");

4、counter()——不使用列表元素实现序号功能

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
		    counter-reset: section;
		}
		h1{
		    counter-reset: subsection;
		}
		h1:before{
		    counter-increment:section;
		    content:counter(section) "、";
		}
		h2:before{
		    counter-increment:subsection;
		    content: counter(section) "." counter(subsection) "、";
		}
	</style>
</head>
<body>
	<h1>HTML tutorials</h1>
	<h2>HTML Tutorial</h2>
	<h2>XHTML Tutorial</h2>
	<h2>CSS Tutorial</h2>
 
	<h1>Scripting tutorials</h1>
	<h2>JavaScript</h2>
	<h2>VBScript</h2>
 
	<h1>XML tutorials</h1>
	<h2>XML</h2>
	<h2>XSL</h2>
</body>
</html>

运行结果：

三、使用

1、清除浮动

清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动

.cf::before,
.cf::after{
	content:"";
	display:table;
}
.cf::after{
	clear:both;
}
.cf{
	*zoom:1;
}

2、模拟float:center的效果

float没有center这个取值，但是可以通过伪类来模拟实现。

这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Float Both</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px/1.8 Georgia, serif;
    }
    #page-wrap {  60%; margin: 40px auto; position: relative; }
    #logo { 250px; height:250px; position: absolute; top: 0; left: 50%; margin-left: -125px; }
    #l, #r {  49%; }
    #l { float: left; }
    #r { float: right; }
    #l:before, #r:before { content: "";  125px; height: 250px; }
    #l:before { float: right; }
    #r:before { float: left; }
    </style>
</head>
<body>
    <div id="page-wrap">
        <img src="1.jpg" id="logo">
        <div id="l">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
        <div id="r">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
    </div>
</body>
</html>

运行结果如下：

3、做出各种图形效果

举例：一个六角星

<style>
	#star-six {
	   0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 100px solid red;
	  position: relative;
	}
	#star-six::after {
	   0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 100px solid red;
	  position: absolute;
	  content: "";
	  top: 30px;
	  left: -50px;
	}
</style>
<body>
	<div id="star-six"></div>
</body>

运行结果：

4、不使用图片创建小图标

举例：比如一个电话

很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。

<style type="text/css">
    #phone{50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
    <div id="phone"></div>
</div>

更多图标：

<!doctype html>
<html>
<head>
    <title>伪类标签使用</title>
</head>
<style type="text/css">
    #wraper{padding:10px;380px;height:380px;border:3px solid #ccc;margin:auto;}
    #power{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
    #power:before{7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
    #play{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
    #pause{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #pause:before{height:20px;5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
    #stop{ 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #stop:before{height:17px;17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
    #comment{ 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
    #comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
    #comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
    #like{ 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
    #like:before{50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
    #search{ 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
    #search:before{20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
    #home{ 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #home:before{6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
    #home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
    #photo{40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #photo:before{13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
    #photo:after{15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
    #photo{40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email{50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
    #email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
    #file{30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
    #file:after{20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
    #history{35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
    #history:before{14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
    #video{50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
    #video:before{6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
    #video:after{10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
    #tags{50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
    #tags:before{10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
    #phone{50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
    #phone:before{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
    #phone:after{15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
    #profile{ 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
    #profile:before{ 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
    <div id="wraper">
        <div id="power"></div>
        <div id="play"></div>
        <div id="pause"></div>
        <div id="stop"></div>
        <div id="comment"></div>
        <div id="like"></div>
        <div id="search"></div>
        <div id="home"></div>
        <div id="photo"></div>
        <div id="email"></div>
        <div id="file"></div>
        <div id="history"></div>
        <div id="video"></div>
        <div id="tags"></div>
        <div id="phone"></div>
        <div id="profile"></div>
    </div>
</body>
</html>

5、显示打印网页的URL

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

6、给blockquote添加引号

经常用到给blockquote 引用段添加巨大的引号作为背景，可以用：:before 来代替 background 。好处是即可以给背景留下空间，还可以直接使用文字而非图片：

<meta charset="utf-8"/>
<style type="text/css">
    blockquote::before {
    content: open-quote;
    color: #ddd;
    z-index: -1;
    font-size:80px;
}
</style>
<blockquote>引用一个段落,双引号用::before伪元素实现</blockquote>

7、超链接特效

举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果

<meta charset="utf-8" />
<style type="text/css">
body{
    background-color: #425a6c;
}
    a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "5B"; left: -10px; }
a:hover::after { content: "5D"; right:  -10px; }
</style>
<a>鼠标移上去出现方括号</a>

更多创意链接特效可参考： Creative Link Effects 。

8、::before和::after实现多背景图片

举例：一个标签应用5张背景图

<meta charset="utf-8" />
<style type="text/css">
#silverback {
    position: relative;
    z-index: 1;
    min- 200px;
    min-height: 200px;
    padding: 120px 200px 50px;
    background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x;
}
#silverback:before, #silverback:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px;
}
#silverback:before {
    content: url(img/gorilla-1.png);
    padding-left: 3%;
    text-align: left;
    background: transparent url(img/vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
    content: url(img/gorilla-2.png);
    padding-right: 3%;
    text-align: right;
    background: transparent url(img/vines-front.png) 70% 0 repeat-x;
}
</style>
<div id="silverback">一个标签应用了5张背景图片</div>

原效果来自：Multiple Backgrounds and Borders with CSS 2.1

这个效果看的真的是脑洞大开，虽然多背景图用css3的background-image很容易就能实现。但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？

相关阅读:
关于指针的定义格式
 C# 调用Qt编写的控件
 Qt中的泛型容器
 Qt之自定义属性Q_PROPERTY
QT——键盘事件（捕获按键事件）
Qt 嵌入浏览器 QWebEngineView实现浏览器基本功能
 QT TextEdit 自适应窗口大小，填满窗口 ——基于函数
 为什么用QWebEngineView开发的浏览器速度很慢
 Qt5.9使用QWebEngineView加载网页速度非常慢，问题解决
 QJson QxORM QtWebApp TreeFrog
原文地址：https://www.cnblogs.com/shixm/p/14056591.html