CSS：带标题的内容之前/之后

我能行

div:after {
  content: "hello"
}

但是，我可以让

hello

文本带有标题，这样当我用鼠标悬停它时，标题就会显示出来吗

---

谢谢

您不需要伪元素：

p{
背景：浅蓝色；
填充：15px；
利润率：15px；
}

一些文本使用：
解决方法是使用两个伪元素

例如，：：after是主元素，：：before将显示在悬停状态，其作用类似于标题

此外，还可以使用javascript或jQuery代码检测伪元素上的鼠标事件


下面是演示说明：


$（'.alert'）。打开（'mousemove'，函数（e）{
如果（e.offsetX>（this.offsetWidth-42））{//42是：：after元素outerWidth
$（this.addClass（'hover'）；
}否则{
$（this.removeClass（'hover'）；
}
}).on（'mouseleave'，函数（e）{
$（this.removeClass（'hover'）；
}).on（'click'，函数（e）{
如果（e.offsetX>（this.offsetWidth-42））{//42是：：after元素outerWidth
$（this.remove（）；
}
});
.alert{
填充：15px；
利润率：50px 0 20px；
边框：1px实心透明；
边界半径：4px；
位置：相对位置；
颜色：#a94442；
背景色：#f2dede；
边框颜色：#ebccd1；
字号：0.85em；
过渡：所有1；
}
.alert:：after、.alert:：before{
内容：“X”；
位置：绝对位置；
右：0；
排名：0；
宽度：40px；
身高：100%；
字号：0.85em；
填充：0；
线高：40px；
文本对齐：居中；
字号：900；
字体系列：草书；
光标：指针；
}
.警报：：之前{
显示：无；
内容：“这是一个标题”；
前-105%；
宽度：自动；
边界：继承；
边界半径：继承；
填充：0.4em；
背景：rgba（0,0,0,0.48）；
颜色：白色；
}
.alert.hover:：after{
颜色：白色；
过滤器：乌贼墨（10%）；
转换：比例（1.1）；
边界半径：继承；
边界：继承；
背景：继承；
}
.alert.hover:：before{
显示：内联块；
}

将悬停在X上以显示标题。
不太清楚：你能举个例子吗？你不能用CSS来做，用jquery
鼠标输入
检查这个
标题
属性应该是CSS属性。接受的答案很酷，但不能回答你的问题。您解决了这个问题吗？您无论如何不能给psuedo元素一个title属性。另外，如果您试图这样做，它建议内容应该首先在您的标记中。我大体上同意，但这取决于额外的“内容”是什么。这并不能回答伪元素的内容与标题（工具提示）不同的问题。非常确定
：hover
是一个伪选择器，而不是伪元素；你需要使用像
：before
或
：after
这样的东西来使用。问题是CSS，所以JS是免费的解决方案。此外，您的“这是一个标题”在CSS中，而重点是在HTML本身中有它（这样它也可以做它的
title
工作）。伪元素不能有标题。所以我的答案只是给那些仍然想使用伪元素的人的一个建议！
div:hover:before{
  content: "Bye";
          }