CSS: before / after content with title

Question

I can do

div:after {
  content: "hello"
}

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

Thanks

Answer 1

You don't need a pseudo-element for that:

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>