CSS:带有标题的内容之前/之后

Question

我可以

div:after {
  content: "hello"
}

但我能否为 hello 文本添加标题，以便当我用鼠标悬停它时显示标题？

谢谢

Answer 1

你不需要伪元素:

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

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

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

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>