Issue
I have a div with some text inside and a border.
When I hover on that div, I want the font to be bold.
This makes my div a bit wider - which causes an annoying flicker.
div {
border: 1px solid black;
display: inline-block;
padding: 20px;
}
span {
padding: 20px;
}
div:hover {
font-weight: bold;
}
<div><span>This is my div</span></div>
How can I resolve this problem?
EDIT:
The div's width has to grow with content, but not with weight.
Solution
Your div is inline-block
and doesn't have an explicit width, so it shrink-wraps the content. The font is a proportional font, so it gets thicker (and takes up more horizontal space) when it is made bold.
Either give the div a fixed width, set it to block
, or use a monospace font.
Answered By - Quentin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.