1
그냥 호버에 에 '표제어' 아래의 코드 조각이 표시되며 요소가 어떻게 움직이는 지 확인할 수 있습니다. 왜?호버 위에 경계를 추가하면 주변 요소가 이동합니다.
여백이 없습니다. 그리고 테두리를 inline-block 요소에 추가 할 때만 움직입니다. 같은 section.twelve a 더 테두리 너비를 추가하려고 :
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
하지만 .. 경계 다의 벌금을 제거하면 왜이 동작은? 국경 만있는거야?
다른 요소에 영향을 미치지 않고 요소에 스타일을 추가하기 만하면됩니다.
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>