css3 中伪元素选择器：：after

利用伪元素中的 content：attr(data-brief) ，，attr(data-brief)是 div 元素的一个属性可以将属性为data-brief的值显示出来

 <style>
        div{
             100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        div::after{
            content: attr(data-brief);
            display: block;
             100%;
            height: 100%;
            position: absolute;
            background-color: rgba(170, 170, 170, 0);
            top: 0;
            left: 0;
            color:red;
        }
        div:hover::after{
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }
    </style>
</head>
<body>
<div data-brief="显示的内容"></div>

　　效果图：

当鼠标，经过div盒子是，hover 起作用，显示属性为data-brief的值 “显示的内容”

css3 中 伪元素选择器 ：：after

css3 中伪元素选择器：：after