Inline elements shifting when made bold on hover
Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.
li {
display: inline-block;
font-size: 0;
}
li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>Text shifting on bold hover
Instead of using the bold attribute to highlight an element, the proper approach is to give the currently hovered link a different color - that way, you won't have these kinds of problems!
Simply remove the bold attribute and change the color to something different, like so:
a:hover
{
text-decoration:none;
color:#000000;
}
Remember that making something bold makes it's size larger to render, and that this is the generally preferred approach.
Here's a working jsFiddle - http://jsfiddle.net/yzsfH/5/
How to stop the movement of box on hover?
The box isn't moving, it's just getting a little bit wider (right aligned, so the left border goes to the left a little bit). That's due to the bold and italic font taking a little more horizontal space than the regular font.
To avoid this, you can use a fixed width on the box: Erase the padding-right and padding-leftand give it text-align: center and an appropriate width setting.
Here's the according fiddle: https://jsfiddle.net/ghwzzyjy/1/
Inline elements shifting when made bold on hover
Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.
li {
display: inline-block;
font-size: 0;
}
li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;
}<ul>
<li><a href="#" title="height">height</a></li>
<li><a href="#" title="icon">icon</a></li>
<li><a href="#" title="left">left</a></li>
<li><a href="#" title="letter-spacing">letter-spacing</a></li>
<li><a href="#" title="line-height">line-height</a></li>
</ul>Hover two elements without shifting effect
Tried it with the transition statements only on the '.logo__name' , '.logo__name h1 div' , '.logo__name h1 span' tags. Shouldn't be necessary on the hover tags, since it's already implied by the non-hover version. This what you're lookin' for?
.logo__name { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); padding: 10px; padding-bottom: 15px; transition: all 300ms ease;}
.logo__name:hover { background-color: #e54b4b;}
.logo__name:hover h1 { color: #ffffff;}
.logo__name:hover h1 span { color: #ffffff;}
.logo__name h1 { font-family: 'Sacramento', Cursive; font-size: 2rem; font-weight: normal; margin: 0; padding: 0; text-align: center;}
.logo__name h1 div { height: 33px; overflow: hidden; transition: all 300ms ease;}
.logo__name h1 span { font-family: 'Pt Serif', Serif; font-size: 0.85rem; text-transform: uppercase; margin-top: -50px; display: block; transition: all 300ms ease;}<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700|Sacramento|Pathway+Gothic+One" rel="stylesheet"> <title>Myriam Lefebvre</title></head><body><div class="logo__name"> <h1><div>Myriam lefebvre</div><br /><span>Développeure-front-end</span></h1></div></body></html>Related Topics
Do I Use ≪Img≫, ≪Object≫, or ≪Embed≫ For Svg Files
How to Set the Equivalent of a Src Attribute of an Img Tag in Css
A Space Between Inline-Block List Items
Render a String in HTML and Preserve Spaces and Linebreaks
Using Margin:Auto to Vertically-Align a Div
Creating Anchor Tag Inside Anchor Tag
How to Set the Margin or Padding as Percentage of Height of Parent Container
Href Syntax: Is It Okay to Have Space in File Name
Removing Whitespace Between HTML Elements When Using Line Breaks
With Ng-Bind-Html-Unsafe Removed, How to Inject Html
How to Force Child Div to Be 100% of Parent Div'S Height Without Specifying Parent'S Height
How to Style Even and Odd Elements
How to Encode/Decode HTML Entities in Ruby
Position Footer At Bottom of Page Having Fixed Header
Override Browser Form-Filling and Input Highlighting With Html/Css