: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的 例子①八卦图 

                      .yin-yang {            width: 96px;            height: 48px;            background: #eee;            border-color: red;            border-style: solid;            border-width: 2px 2px 50px 2px;            border-radius: 100%;            position: relative;        }        #yin-yang:before {            content: "";            position: absolute;            top: 50%;            left: 0;            background: #eee;            border: 18px solid red;            border-radius: 100%;            width: 12px;            height: 12px;        }        #yin-yang:after {            content: "";            position: absolute;            top: 50%;            left: 50%;            background: red;            border: 18px solid #eee;            border-radius: 100%;            width: 12px;            height: 12px;        }           


      
查看更多关于:before和:after_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105769