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显示的效果，如下图所示：