【原创】CSS中常用伪元素

CSS 伪元素用于设置元素指定部分的样式

1.设置元素的首字母、首行的样式
2.在元素的内容之前或之后插入内容
::first-line 伪元素:用于向文本的首行添加特殊样式。
       
       
       
          
             p::first-line {
                color: #ff0000;
                font-variant: small-caps;
             }
          
      
      
        您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越 
        来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。

::first-letter 伪元素用于向文本的首字母添加特殊样式。
       
       
       
       
          p::first-letter {
             color: #ff0000;
             font-size: xx-large;
          }
       
       
       
          您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！

::before 伪元素可用于在元素内容之前插入一些内容。
       
       
       
       
           h1::before {
              content: url(/i/photo/smile.gif);
           }
       
       
       
           这是一个标题
           ::before 伪元素在一个元素的内容之前插入内容。
           这是一个标题
       
       
::after 伪元素可用于在元素内容之后插入一些内容。
       
       
       
       
          h1::after {
              content: url(/i/photo/smile.gif);
          }
       
       
       
          这是一个标题
          ::after 伪元素在一个元素之后插入内容。
          这是一个标题
       
       
::selection 伪元素匹配用户选择的元素部分。
       
       
       
       
       ::-moz-selection { /* 针对 Firefox 的代码 */
         color: red;
         background: yellow;
       }

       ::selection {
         color: red;
         background: yellow;
       }
       
       
       
       请选择本页中的文本：
       这是一个段落。
       这是 div 元素中的文本。
       注释：Firefox 支持可供替代的 ::-moz-selection 属性。

需要设置浮动元素父级元素class属性为clearfix
通过设置.clearfix::after样式清除浮动,如下:
     
        .clearfix::after {
        /*在content属性中展示一个“.”是一种清除浮动规范*/
        content: ".";
        /*把伪元素转化为块级元素，清除浮动的墙必须是块级元素*/
        display: block;
        /*清除浮动*/
        clear: both;
        /*清除浮动的优化操作*/
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        }