CSS:带有标题的内容之前/之后 [英] CSS: before / after content with title

问题描述

我可以做到

div:after {
  content: "hello"
}

但是我可以带hello文本加上标题，以便在用鼠标悬停时显示标题吗?

But can I have the hello text with a title so that when I hover it with the mouse, the title is displayed?

谢谢

推荐答案

您不需要伪元素:

p {
    background:lightblue;
    padding:15px;
    margin:15px;
}

<p class="hover-me" title="I Show up on Hover">Some Text</p>

但是，如果您需要使用伪元素

However, if you need to use a pseudo element

p {
    background:lightblue;
    padding:15px;
    margin:15px;
    position: relative;
}

p:hover:after {
    position: absolute;
    content:attr(data-title);
    left:0;
    top:0;
    width:200px;
    height:1.25rem;
    background-color: blue;
    color:white;
}

<p class="hover-me" data-title="I Show up on Hover">Some Text</p>

这篇关于CSS:带有标题的内容之前/之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！