在带有CSS的伪元素之后添加：after弹出窗口

Question

我很有趣，当我将鼠标悬停:after伪元素上时，是否可以在:after伪元素上添加一个小的弹出框？ 完全不用HTML就能做到吗？ 我试图在网上搜索它，但似乎总是需要标记中的某种<span>或<div>元素来显示弹出文本。 虽然我想用纯CSS做到这一点。 有一些技巧吗？

button::after {
  content: "i";
  color: blue;
}

button:hover::after {
  color: red;
  cursor: pointer;
  // add css to display popup
}

Answer 1

仅用于演示。

尝试这个：

<!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>

Answer 2

当然，有一种方法可以做到，基本上：after和：before伪总是需要一个元素在该元素之前或之后，但是我们可以将其与悬停混合以完成您想要的操作，如下所示，运行下面的代码以查看它如何为您工作：

 button { width: 120px; height: 50px; position: relative; font-size: 32px; cursor: pointer; } button:after { content: 'x'; font-size: 32px; height: 100%; width: 100%; position: absolute; display: none; } button:hover:after { display: block; color: red; cursor: pointer; top: 6px; }

 <button class="btn">x</button>

在带有CSS的伪元素之后添加：after弹出窗口

问题描述

2 个解决方案

解决方案1
0 2017-07-13 08:22:23

解决方案2
0 2017-07-13 11:02:09

在带有CSS的伪元素之后添加：after弹出窗口

问题描述

2 个解决方案

解决方案1 0 2017-07-13 08:22:23

解决方案2 0 2017-07-13 11:02:09

解决方案1
0 2017-07-13 08:22:23

解决方案2
0 2017-07-13 11:02:09