ホバー上のフィックス拡張要素

Question

私はこの問題を解決する方法がわかりません： 'a'要素のホバー上ではdivが拡大し、もう一方は '移動'します。ここでは、ヘルプ

https://jsfiddle.net/0r2v2qyp/

ため

感謝のhtml：

<a id="btn_agency" class="btn_presentation">Agenzia</a> 
<a id="btn_student" class="btn_presentation">Studente</a> 
<a id="btn_prof" class="btn_presentation">Docente</a> 
<a id="btn_admin" class="btn_presentation">Segreteria</a> 

とCSS：

.btn_presentation { 
    float: left; 
    margin: 10px; 
    color: royalblue; 
    font-size: 20px; 
    position: relative; 
    letter-spacing: 0; 
    text-transform: uppercase; 
    transition: all .2s ease-out; 
} 

.btn_presentation:after { 
    content: ''; 
    position: relative; 
    display: block; 
    margin: 0 auto; 
    width: 0; 
    height: 0; 
    background: red; 
    transition: all .2s ease-out; 
} 

.btn_presentation:hover { 
    letter-spacing: 5px; 
    transition: all .3s ease-in; 
} 

.btn_presentation:hover:after { 
    width: 100%; 
    height: 2px; 
    transition: all .2s ease-in-out; 
} 

Answer 1

文字間隔をアニメーション化することができるようにするには、あなたが与えなければなりませんdivは展開時にテキストを補うのに十分な幅の固定幅です。

---

div { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    width: 120px; 
 
} 
 

 
.btn_presentation { 
 
    display: inline-block; 
 
    color: royalblue; 
 
    font-size: 20px; 
 
    position: relative; 
 
    letter-spacing: 0; 
 
    text-transform: uppercase; 
 
    transition: all .2s ease-out; 
 
} 
 

 
.btn_presentation:after { 
 
    content: ''; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 0; 
 
    height: 0; 
 
    background: red; 
 
    transition: all .2s ease-out; 
 
} 
 

 
.btn_presentation:hover { 
 
    letter-spacing: 5px; 
 
    transition: all .3s ease-in; 
 
} 
 

 
.btn_presentation:hover:after { 
 
    width: 100%; 
 
    height: 2px; 
 
    transition: all .2s ease-in-out; 
 
}

<div> 
 
    <a id="btn_agency" class="btn_presentation">Agenzia</a> 
 
</div> 
 
<div> 
 
    <a id="btn_student" class="btn_presentation">Studente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_prof" class="btn_presentation">Docente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_admin" class="btn_presentation">Segreteria</a> 
 
</div>

オプションは、代わりに使用して、それを拡張することができ transform

div { 
 
    display: inline-block; 
 
    margin: 10px; 
 
} 
 

 
.btn_presentation { 
 
    display: inline-block; 
 
    color: royalblue; 
 
    font-size: 20px; 
 
    position: relative; 
 
    letter-spacing: 0; 
 
    text-transform: uppercase; 
 
    transition: transform .2s ease-out; 
 
} 
 

 
.btn_presentation:after { 
 
    content: ''; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 0; 
 
    height: 2px; 
 
    background: red; 
 
    transition: width .2s ease-out; 
 
} 
 

 
.btn_presentation:hover { 
 
    transform: scale(1.2); 
 
    transition: transform .3s ease-in; 
 
} 
 

 
.btn_presentation:hover:after { 
 
    width: 100%; 
 
    transition: width .2s ease-in-out; 
 
}

<div> 
 
    <a id="btn_agency" class="btn_presentation">Agenzia</a> 
 
</div> 
 
<div> 
 
    <a id="btn_student" class="btn_presentation">Studente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_prof" class="btn_presentation">Docente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_admin" class="btn_presentation">Segreteria</a> 
 
</div>

---

は、これは言葉の代わりにどうするかだけサイドの方法

div { 
 
    display: inline-block; 
 
    margin: 10px; 
 
} 
 

 
.btn_presentation { 
 
    display: inline-block; 
 
    color: royalblue; 
 
    font-size: 20px; 
 
    position: relative; 
 
    letter-spacing: 0; 
 
    text-transform: uppercase; 
 
    transition: transform .2s ease-out; 
 
} 
 

 
.btn_presentation:after { 
 
    content: ''; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 0; 
 
    height: 2px; 
 
    background: red; 
 
    transition: width .2s ease-out; 
 
} 
 

 
.btn_presentation:hover { 
 
    transform: scaleX(1.2); 
 
    transition: transform .3s ease-in; 
 
} 
 

 
.btn_presentation:hover:after { 
 
    width: 100%; 
 
    transition: width .2s ease-in-out; 
 
}

<div> 
 
    <a id="btn_agency" class="btn_presentation">Agenzia</a> 
 
</div> 
 
<div> 
 
    <a id="btn_student" class="btn_presentation">Studente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_prof" class="btn_presentation">Docente</a> 
 
</div> 
 
<div> 
 
    <a id="btn_admin" class="btn_presentation">Segreteria</a> 
 
</div>