在帶有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