我很感兴趣，有一种方法可以在 :after 上添加一个小弹出框。当我悬停它时伪元素？有没有可能完全没有 HTML？我试图在网上搜索它，但似乎我总是需要某种 <span>或 <div>标记中的元素以显示弹出文本。虽然我想用纯 CSS 来做。有什么技巧吗？
button::after {
content: "i";
color: blue;
}
button:hover::after {
color: red;
cursor: pointer;
// add css to display popup
}
最佳答案
仅供演示。
试试这个:
<!DOCTYPE html>
<html>
<head>
<style>
.block{display:none;padding:20px;}
button::after {
content: "i";
color: blue;
height:
}
button:hover::after {
color: red;
cursor: pointer;
}
button:hover~.block{display:block !important;background-color:red !important;}
</style>
</head>
<body>
<button class="button"></button>
<div class="block">Alert</div>
</body>
</html>
关于html - 在 :after pseudo element with css 添加弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45074788/