html5-自定义元素属性data-和content的attr用法

<h2 class="h" data-zj="jy">我是自定义的属性</h2>

h2[data-zj="jy"]{
    color:#FFFF33;}
    
h2[data-zj="jy"]:hover:after{
    content:attr(data-zj);
}

1.data-是自定义属性的写法，后面接你的属性名字如：zj。

2.h2[data-zj="jy"]通过CSS3的属性选择器来定义样式。

3.结合:hover:after这两个伪类：让鼠标悬停在元素上面的时候，在其后面显示出自定义的属性值 :ontent:attr(data-zj);

转载于:https://www.cnblogs.com/lufy/archive/2012/05/16/2503910.html