注意
目前只支持content属性
content
<html> <p class="demo-attr" data-title="张三"></p> </html> <style> .demo-attr{ position: relative; padding: 2px; border: 2px solid #99c2ec; border-radius: 50%; width: 24px; height: 24px; background-clip: content-box; cursor: pointer; transition: all 300ms; background-color:#99c2ec; margin: 30px; } .demo-attr::before, .demo-attr::after { position: absolute; left: 50%; bottom: 100%; opacity: 0; transform: translate3d(0, -30px, 0); transition: all 300ms; } .demo-attr::before { margin: 0 0 12px -35px; border-radius: 5px; width: 70px; height: 30px; background-color: rgba(0,0,0, .5); line-height: 30px; text-align: center; color: #fff; content: attr(data-title); } .demo-attr::after { margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(0,0,0, .5); width: 0; height: 0; content: ""; } .demo-attr:hover::before,.demo-attr:hover::after { opacity: 1; transform: translate3d(0, 0, 0); } </style>
← 如何根据系统主题自动响应CSS深色模式 CSS给table的tbody添加滚动条→
L&Z's blog 
使用hover和attr()定制悬浮提示