Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?
There's no margin .. And they're only moving when I add border to the inline-block
element. Try to add more border width in section.twelve a
like:
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?
I just want to add any styles to the element without effecting the others.
section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}
.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
<h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1>
</section>
See Question&Answers more detail:os