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

Question

I'm interesting is there are a way to add a small popup box on :after pseudo element when I hover it? 我很有趣，当我将鼠标悬停:after伪元素上时，是否可以在:after伪元素上添加一个小的弹出框？ Is it possible to do it without HTML at all? 完全不用HTML就能做到吗？ I tried to search the web for it, but it seems that I always need some kind of <span> or <div> elements in markup to display popup text. 我试图在网上搜索它，但似乎总是需要标记中的某种<span>或<div>元素来显示弹出文本。 Although I want to do it with pure CSS. 虽然我想用纯CSS做到这一点。 Is there are some tricks for that? 有一些技巧吗？

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

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

Answer 1

Just for demo. 仅用于演示。

try this: 尝试这个：

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

Sure, there is way to do, basically :after and :before pseudo needs always an elements to be before or after that element, but we can mix it with hover to do what you are looking for like below, run the code below to see how it's working for you: 当然，有一种方法可以做到，基本上：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