一、介绍

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>
<metacharset="utf-8" />
<styletype="text/css">.phoneNumber::before{content:'\260E';font-size:15px;
}
</style>
<pclass="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 \0024 ¢ &#162 \u00A2 \00A2
£ &#163 \u00A3 \00A3 ¤ &#164 \u00A4 \00A4
€ &#8364 \u20AC \20AC ¥ &#165 \u00A5 \00A5
₱ &#8369 \u20B1 \20B1 ₹ &#8377 \u20B9 \20B9

½  数学类

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

♫  音乐符号类

符号 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 \00A0 ☐ &#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 \0391 Β &#914 \u0392 \0392
Γ &#915 \u0393 \0393 Δ &#916 \u0394 \0394
Ε &#917 \u0395 \0395 Ζ &#918 \u0396 \0396
Η &#919 \u0397 \0397 Θ &#920 \u0398 \0398
Ι &#921 \u0399 \0399 Κ &#922 \u039A \039A
Λ &#923 \u039B \039B Μ &#924 \u039C \039C
Ν &#925 \u039D \039D Ξ &#926 \u039E \039E
Ο &#927 \u039F \039F Π &#928 \u03A0 \03A0
Ρ &#929 \u03A1 \03A1 Σ &#931 \u03A3 \03A3
Τ &#932 \u03A4 \03A4 Υ &#933 \u03A5 \03A5
Φ &#934 \u03A6 \03A6 Χ &#935 \u03A7 \03A7
Ψ &#936 \u03A8 \03A8 Ω &#937 \u03A9 \03A9

☩  十字

符号 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 \00AE © &#169 \u00A9 \00A9
℗ &#8471 \u2117 \2117 ™ &#153 \u0099 \0099
℠ &#8480 \u2120 \2120        

@  标点和符号

符号 UNICODE 符号 UNICODE
HTML JS CSS HTML JS CSS
« &#171 \u00AB \00AB » &#187 \u00BB \00BB
‹ &#139 \u008B \008B › &#155 \u009B \009B
“ &#8220 \u201C \201C ” &#8221 \u201D \201D
‘ &#8216 \u2018 \2018 ’ &#8217 \u2019 \2019
• &#8226 \u2022 \2022 ◦ &#9702 \u25E6 \25E6
¡ &#161 \u00A1 \00A1 ¿ &#191 \u00BF \00BF
℅ &#8453 \u2105 \2105 № &#8470 \u2116 \2116
& &#38 \u0026 \0026 @ &#64 \u0040 \0040
℞ &#8478 \u211E \211E ℃ &#8451 \u2103 \2103
℉ &#8457 \u2109 \2109 ° &#176 \u00B0 \00B0
| &#124 \u007C \007C ¦ &#166 \u00A6 \00A6
– &#8211 \u2013 \2013 — &#8212 \u2014 \2014
… &#8230 \u2026 \2026 &#182 \u00B6 \00B6
∼ &#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 { width: 60%; margin: 40px auto; position: relative; }#logo { width:250px; height:250px; position: absolute; top: 0; left: 50%; margin-left: -125px; }#l, #r { width: 49%; }#l { float: left; }#r { float: right; }#l:before, #r:before { content: ""; width: 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 {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six::after {width: 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{width: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{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}#phone:after{width: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;width:380px;height:380px;border:3px solid #ccc;margin:auto;}#power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}#power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}#play{width: 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{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}#pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}#stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}#stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}#comment{width: 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{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}#like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}#search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}#search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}#home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}#home:before{width: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{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}#photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}#photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}#photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}#email{width: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{width: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{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}#history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}#history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}#video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}#video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}#video:after{width: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{width: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{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}#phone{width: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{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}#profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}#profile:before{width: 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-width: 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年后的开发人员做些什么贡献呢？

before和after的用法相关推荐

  1. c语言中external，static关键字用法

    static用法: 在C中,static主要定义全局静态变量.定义局部静态变量.定义静态函数. 1.定义全局静态变量:在全局变量前面加上关键字static,该全局变量变成了全局静态变量.全局静态变量有 ...

  2. Pandas_transform的用法

    先来看一个实例问题. 如下销售数据中展现了三笔订单,每笔订单买了多种商品,求每种商品销售额占该笔订单总金额的比例.例如第一条数据的最终结果为:235.83 / (235.83+232.32+107.9 ...

  3. Python中yield和yield from的用法

    yield 后面接的是 future 对象 调用方 委托生成器 yield from 直接给出循环后的结果 yield from 委托者和子生成器直接通信 yield from 直接处理stopIte ...

  4. pytorch学习 中 torch.squeeze() 和torch.unsqueeze()的用法

    squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的 ...

  5. python yield 和 yield from用法总结

    #例1. 简单输出斐波那契數列前 N 个数 #缺点:该函数可复用性较差,因为 fab 函数返回 None,其他函数无法获得该函数生成的数列 #要提高 fab 函数的可复用性,最好不要直接打印出数列,而 ...

  6. tf.nn.embedding_lookup()的用法

    函数: tf.nn.embedding_lookup( params, ids, partition_strategy='mod', name=None, validate_indices=True, ...

  7. OpenMP用法大全

    OpenMP基本概念 OpenMP是一种用于共享内存并行系统的多线程程序设计方案,支持的编程语言包括C.C++和Fortran.OpenMP提供了对并行算法的高层抽象描述,特别适合在多核CPU机器上的 ...

  8. Dorado用法与示例

    Dorado用法与示例 dorado用后总结 一.dorado概念 dorado的产品全名是"dorado展现中间件".从产品形态上dorado由两部分组成,第一部分是一个具有AJ ...

  9. TensorFlow用法

    TensorFlow用法 什么是TensorFlow TensorFlow是一个开源软件库,用于使用数据流图进行数值计算.图中的节点表示数学运算,而图的边缘表示流动的多维数据数组(张量).这种灵活的体 ...

  10. TensorFlow Keras API用法

    TensorFlow Keras API用法 Keras 是与 TensorFlow 一起使用的更高级别的作为后端的 API.添加层就像添加一行代码一样简单.在模型架构之后,使用一行代码,可以编译和拟 ...

最新文章

  1. 设计模式之代理模式（Proxy Pattern）
  2. MongoDB 全文检索
  3. Web性能优化之图片优化
  4. 这款电脑升降桌美到我了
  5. 使用 el 能否定义作用域变量_Jsp之El表达和JSTL标签库
  6. 46 CO配置-控制-利润中心会计-创建虚拟利润中心
  7. LLVM PHI - if else
  8. Linux---生产者与消费者模型
  9. CPLEX求解器入门案例
  10. Mysql授权root账户允许远程连接访问
  11. mysql为什么要重建索引_深入理解重建索引
  12. 软件开发未来五大技术趋势
  13. 女生对于脸上的痘痘要格外的呵护哦
  14. qlv文件是什么？qlv文件格式介绍
  15. mysql binlog定点恢复锁表_MySQL -- binlog 操作与恢复
  16. php 抓取网页内容与图片
  17. wx python 基本控件
  18. 异类 不一样的成功启示录
  19. 利用ESP定律的upx脱壳实践
  20. 2022哪款充电宝质量好？2022充电宝排行

热门文章

  1. 利用Xshell连接服务器导入web安装包并解压启动
  2. OpenCV-Python] OpenCV 中摄像机标定和 3D 重构 部分 VII
  3. F - 悼念512汶川大地震遇难同胞SDUT
  4. Python修改图片格式以及相对应labelme标注的Json文件
  5. ESP8266 软窜口控制 红外模块发射 遥控电视电视
  6. Plug and Play
  7. Spring简单实现打印机功能-附完整代码
  8. 老狗——GridView获取当前行的索引
  9. 2021高校毕业生就业薪酬分析：博士、硕士、本科、专科的月起薪算数平均值分别为14823元、10113元、5825元、3910元[图]
  10. MLX90640+STM32F103实现USB版红外测温