Search code examples
csstitlepseudo-element

CSS: before / after content with title

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

Solution

  • 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>