:before和 :after_html/css_WEB-ITnose

: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文件

>    
        
            
                            
            
                            
            
                            
            
                            
        
            
            
                
                           
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/

初次写博文，都是拿别人的过来自己学习的。