css3 attr和content 属性

比如我们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，但是现在我们要更美观，可以使用css3提供的attr：能够在css中获取到元素的某个属性值，然后插入到伪元素的content中去。

假如我们的html代码如下：

<div data-title="hello, world">hello...</div>

我们来看看实现这个插件的css代码：

div {    position: relative;}div:hover::after {    content: attr(data-title);    //取到data-title属性的值    display: inline-block;    padding: 10px 14px;    border: 1px solid #ddd;    border-radius: 5px;    position: absolute;    top: -50px;    left: -30px;}

当hover的时候，在元素尾部添加一个内容为data-title属性值的元素，所以就实现了hover显示的效果，如下图所示：