css 鼠标显示警告 |cssloader modules使用

/* CSS代码 */
.element:hover:before {
content: attr(data-warning);
position: absolute;
top: -30px;
left: -150%;
padding: 8px;
color: #fff;
background-color: #cc0000;
border-radius: 4px;
font-size: 12px;
z-index: 999;
}
.element:hover:after {
content: "";
position: absolute;
top: -10px;
left: -5px;
border-width: 5px 5px 0;
border-style: solid;
border-color: #cc0000 transparent;
}

上述代码使用:before和:after选择器来添加内容和样式。在鼠标移动到元素上时，:before选择器会在元素之前添加一个包含警告信息的伪元素。样式包括：绝对定位、背景颜色、边框圆角、字体大小等。同时，还使用了data-warning属性来指定警告信息。

在:after选择器中，使用了三角形边框来增加警告的视觉效果。通过改变border-color来调整边框颜色。

需要注意的是，z-index属性应该设置为足够大的值，以确保警告信息显示在最前面。