CSS 中的伪元素::before 和 ::after 的一些基础应用的学习

转载内容

一 基本语法

    在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符
时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：            **p:before  {   }**

    不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者  
width 等属性时使得显示脱离了原本元素后，建议按照标准写双冒号。过于老的浏览器可能会存在支持问题，
不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了；

    这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意
这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以
下几个值：

 - String – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
             -  a ::after { content: "string"; }

 - attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示
 出来。示例：
         -  a ::after { content:" " attr(href) " "; } 
         -   注意此处有两种写法，其一必须再加多一组双引号，如果没有加多一组双引号，那么它将变
             成一个字符串插入。另一种写法a ::after { content: attr(href) ; } 

 - url() / uri() – 用于引用媒体文件。示例：
             -  h1 ::before { content: url(logo.png); }
             - 注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文
               本“url(image.jpg)”作为其内容，插入的而不是图像本身。

 - counter() –  调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 
 和 counter-reset 属性的用法。示例：
         - h2:before { counter-increment: chapter; content: "Chapter " 
           counters(chapter) ". " }
         - counter-reset : chapter ； 表示初始创建一个chapter的计数器
         - counter-increment : chapter；  表示启用chapter计数器
         - counters : 在计算多个元素数据时使用 . 分隔

二 进阶技巧

   清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。
现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：    
.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

    除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个
容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 
content:"" 。否则，其他的样式属性一概不会生效。

三 插入内容的特点

    正如前面提及的，插入的内容在页面的源码里是不可见的。只能在css里可见

    同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给
插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。

    这会是对如何设计伪元素的一个简要的说明，看我下面文本编辑器的这幅图   

    还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用
到body元素里，然后伪元素会像其他元素一样继承这些字体系列。

    同样的，伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。     

伪元素不是决定性的

    幸运的是，缺少伪元素不会造成大问题。大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支
持的浏览器造成问题。所以，如果你的支持者具有较高的IE版本，你仍然可以在某种程度上使用它们。

一些提醒

    正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，
不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

    另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造
成难以维护和调试缓慢。

实例测试

    <a  type="button" title="Play">Play</a>   用a标签做个按钮

        这是一些CSS代码，PS：（有些可能多余，兼容性也没写。）

a{
            display: inline-block;
            text-align:center;
            line-height:25px;
            position:relative;           /*设置相对定位，伪元素生成内容时要用到*/
            width:55px;
            height:25px;
            -webkit-border-radius:5px;
            border:1px solid #e4393c;
            background:#fff;
            text-decoration:none;
            color:#333;
            cursor:pointer;
            font-weight:bold;
            font-family:"SimHei";
            transform: translateZ(800px); /*定义元素过度的方向，此处为定义元素的视距*/
            transition: color 350ms;
        }
        a::before{
            content:attr(title);      /*生成该元素的title属性*/
            position:absolute;       /*绝对定位到元素上*/
            top:-1px;                 /*因为元素有使用边框，所以调整的偏差*/
            left:-1px;
            bottom:-1px;
            right:-1px;
            /*width:100%;*/
            /*height:100%;*/
            z-index: -1;              /*层级关系，使元素暂时不可见*/
            -webkit-border-radius:5px;
            /*transform-origin: 50%;*/
            transform: scaleY(0);     /*定义元素缩放的方向和比例*/
            background:#000;          /*定义元素缩放的背景色*/
            transition: transform 350ms;
        }
        a:hover::before{
            transform: scaleY(1);      /*当元素被hover时触发伪元素的变形方向和比例*/
        }
        a:hover{
            color:#fff;
        }

以上代码就可以生成一个具有动画效果的小按钮。