:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：
#example:before { content: "#"; color: red;} #example:after { content: "$"; color: red;}这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素.效果为 #Here is the example content$ 需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
#example:before { content: ""; display: block; width: 100px; height: 100px;}最后附上2个:befroe 和：after的 例子①八卦图
②
烤肉图
③
古典磁带
html文件
demo > A
音乐播放器
css文件
.cassette { position: relative; margin: 70px auto; background-color: #d55e40; border-radius: 20px; width: 534px; height: 335px; } .cassette:before { position: absolute; content: ""; z-index: 50; bottom: 20px; left: -3px; height: 90px; border-right: #d55e40 solid 5px; border-top: transparent solid 10px; border-bottom: transparent solid 10px; } .cassette:after { position: absolute; content: ""; z-index: 50; bottom: 20px; right: -3px; height: 90px; border-left: #d55e40 solid 5px; border-top: transparent solid 10px; border-bottom: transparent solid 10px; } .screw { position: absolute; display: block; width: 22px; height: 22px; background: #8b392e; border-radius: 50%; } .screw-inner { position: absolute; display: block; width: 16px; height: 16px; border-radius: 50%; top: 3px; left: 3px; transform: rotate(50deg); } .screw-inner:before, .screw-inner:after { content: ""; position: absolute; z-index: 2; background: #449ba2; width: 5px; border-radius: 2px; } .screw-inner:before { left: 50%; width: 40%; margin-left: -20%; height: 100%; } .screw-inner:after { top: 50%; height: 40%; margin-top: -20%; width: 100%; } .screws .screw:nth-child(1) { top: 5px; left: 10px; } .screws .screw:nth-child(2) { top: 5px; right: 10px; } .screws .screw:nth-child(3) { left: 10px; bottom: 5px; } .screws .screw:nth-child(4) { right: 10px; bottom: 5px; } .outer-sticker { background: #8b392e; width: 474px; height: 210px; position: relative; left: 50%; margin-left: -237px; border-radius: 16px; position: relative; margin-top: 25px; display: inline-block; } .sticker { background: #f3ae53; margin: 0 auto; width: 466px; height: 200px; border-radius: 16px; position: relative; margin-top: 5px; } .sticker-header { float: left; padding: 10px 20px 0px; width: 100%; } .sticker-header .side { font-weight: 700; font-size: 30px; color: #f3ae53; padding: 0 5px 1px; line-height: 32px; margin-top: 10px; background: #d55e40; float: left; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .sticker-header .notes { float: left; margin-left: 15px; width: 374px; } .sticker-header .notes hr { border: 0; height: 3px; background: #756046; margin-bottom: 15px; } .sticker-center { position:relative; display:inline-block; width:100%; } .sticker-center .stripe-a { background: #8b392e; display: inline-block; width: 100%; height: 30px; } .sticker-center .stripe-b { background: #449ba2; display: inline-block; width: 100%; height: 30px; margin-top: 30px; } .sticker-center .cassete-center { background: #d55e40; margin: 0 auto; width: 318px; height: 92px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; position: absolute; top: 0; left: 50%; margin-left: -159px; } .sticker-center .cassete-center .circle { border-radius: 50%; width: 65px; height: 65px; background: #fff; position: absolute; top: 12px; -moz-animation: spin 0.8s infinite linear; -webkit-animation: spin 0.8s infinite linear; animation: spin 0.8s infinite linear; } .sticker-center .cassete-center .circle:nth-child(1) { left: 15px; } .sticker-center .cassete-center .circle:nth-child(2) { right: 15px; } .sticker-center .cassete-center .circle i { display: block; position: absolute; width: 5%; height: 55%; left: 45%; top: -5%; border-top: solid 15px #d55e40; transform-origin: 55% 70%; /*旋转原点的位置，也就是O点的位置哦*/ z-index: 999; } .sticker-center .cassete-center .circle i:nth-child(1) { transform: rotate(30deg); } .sticker-center .cassete-center .circle i:nth-child(2) { transform: rotate(90deg); } .sticker-center .cassete-center .circle i:nth-child(3) { transform: rotate(150deg); } .sticker-center .cassete-center .circle i:nth-child(4) { transform: rotate(210deg); } .sticker-center .cassete-center .circle i:nth-child(5) { transform: rotate(270deg); } .sticker-center .cassete-center .circle i:nth-child(6) { transform: rotate(330deg); } .sticker-center .cassete-center .window { position: absolute; overflow: hidden; background: white; width: 122px; height: 60px; left: 50%; margin-left: -61px; margin-top: 15px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .sticker-center .cassete-center .window .reel { border-radius: 50%; width: 190px; height: 190px; background: #8b392e; position: absolute; top: -60px; -moz-animation: spin 0.8s infinite linear; -webkit-animation: spin 0.8s infinite linear; animation: spin 0.8s infinite linear; } .sticker-center .cassete-center .window .reel:nth-child(1) { left: -150px; } .sticker-center .cassete-center .window .reel:nth-child(2) { right: -150px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .sticker-bottom { margin: 5px 5px; overflow: auto; } .sticker-bottom hr { border: 0; height: 3px; background: #363844; width: 170px; } .sticker-bottom hr:nth-child(1) { float: left; } .sticker-bottom hr:nth-child(3) { float: right; } .sticker-bottom h5 { font-size: 12px; float: left; line-height: 19px; padding-left: 27px; margin:0px; } 部分代码摘自
http://www.hulufei.com/post/about-before-and-after-pseudo-element
http://www.html5tricks.com/
初次写博文，都是拿别人的过来自己学习的。