伪元素(pseudo)的强大简直出乎我的意料

1、写法

a::after {
    content: "___";
    color: white;

}

        
CSS3中，伪类用单冒号:，伪元素用双冒号::，以示区别

2、内容content

        
content内容很强大，可以写入各种字符及字符串，还有部分多媒体文件content: url(img)

3、content里内容的获取

        
content里的内容可以通过attr从HTMLdata-*属性获取

html:
    <a href="#" data-pseudoContent="_______">切换选项</a>

css:
    a::after {
        content: attr(data-pseudoContent);
    }

4、切换伪元素样式

.active {
    color: red;
}
.active::after {
    color: red;
}

        
点击文本，切换样式，给a标签加个active，要想伪元素有效果，所以.active::after

5、获取伪元素的属性值

        
先获取伪元素样式申明对象，通过getComputedStyle()方法

var styleObj = window.getComputedStyle(element[, pseudoElement]);

• element： 伪元素所在的DOM元素

        
再获取某个具体样式属性值，通过getPropertyValue()方法，也可以通过点操作符.，或者中括号操作符[]

styleObj.getPropertyValue("color");

styleObj.color;

styleObj["color"];

注意：上面的方法是通用的，不仅仅只是为了取得伪元素属性值。因为先取得某个元素样式申明对象window.getComputedStyle(element)，再取得某个具体样式属性值styleObj.getPropertyValue("color")。上面两个方法可以取得任何元素的样式申明对象及样式值。

        
所以这个让我们联想到，之前写的一个兼容新方法，获取行间或非行间样式值

function getStyle(obj, attr) {
    if (obj.currentStyle) {     //兼容IE
        return obj.currentStyle[attr];
    } else {
        return window.getComputedStyle(obj)[attr];      //兼容非IE
    }
}