利用伪元素中的 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的值 “显示的内容”