3 ways to display content on hovering over an element using only CSS

Method 1 : Using <dfn>..</dfn> Tag in HTML with the title attribute and styling the title attribute with CSS

HTML

<dfn title="Official website is dev.to">Dev</dfn> is a community 
of software developers getting together to help one another out.

The text(Here Dev) within the <dfn> tag will be in italic by default.
We will style title="Official website is dev.to" attribute to our requirements.

CSS

dfn[title] {
    position: relative;
}
dfn[title]::after {
    content: attr(title);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
dfn[title]:hover::after {
    transform: scale(1);
}

---

Method 2 : Using Only Pseudo Elements ::before or ::after with Pseudo class :hover

We will display a text over the word dev.

HTML

<span id="dev-describe">Dev</span> is a community of software developers getting together to help one another out.

We will use this sequence -
element --> on hover --> display ::before or ::after

CSS

#dev-describe:hover::before {
    content: "Official website is dev.to";
    background-color: #ff746b;
    color: #ffffff;
    position: absolute;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: 6px;
}

And then position your content as per your requirements!

---

Method 3 : Using the attribute data-* for the element

HTML

<a  href="https://dev.to/"  data-explain="A community of software developers getting together to help one another out">Dev</a>

CSS

a[data-explain] {
    position: relative;
}
a[data-explain]::after {
    content: attr(data-explain);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
a[data-explain]:hover::after {
    transform: scale(1);
}

---

Check out the whole series!
Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Comments

[Jackson Kasi]

hey! it's nice 👌
can you do this for your upcoming CSS/any other language based ( just my request )
can you attach stackblitz / code-sandbox with your code?

Because I am really lazy to try this code.
If you do this, many developers like me will benefit ✨

[devkoustav]

Ok, I'll attach 👍🏻

[devkoustav]

Feeling something missing?
Put your suggestions in the comments 😄

I'll be happy to add your suggestions!

[devkoustav]

Did this post help you?
Save it for later...

lets_code_together

[Wendy Bardsley]

Curious about mobile behavior, as hover is problematic there. That's one of the reasons I stopped using it. Would love to hear how all are handling that successfully. I may have missed something ;)