This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by devkoustav
Method 1 : Using dfn Tag with the title attribute in HTML Document
HTML
<dfn title="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 this dfn tag 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 Pseudo Elements ::before or ::after
We will display a text over the word dev.
HTML
<span id="devDescribe">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/::after
CSS
#devDescribe:hover::before {
content: "dev.to";
background-color: #ff746b;
color: #fff;
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!
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by devkoustav
devkoustav | Sciencx (2022-10-14T03:44:05+00:00) 3 ways to display content on hovering over an element using only CSS. Retrieved from https://www.scien.cx/2022/10/14/3-ways-to-display-content-on-hovering-over-an-element-using-only-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.