擬似要素は、アンカータグの境界線との位置合わせない

Question

I次CSS3ボタンのアニメーションを持っている：

HTML ::

<a href="" class="btn"> 
    <span> 
     Hover on Me 
    </span> 
</a> 

CSS：

/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

body { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 


/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 


/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

a { 
    text-decoration: none; 
} 


/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

a:hover, 
a:active, 
a:focus { 
    text-decoration: none; 
} 


/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn { 
    display: inline-block; 
    border: 2px solid rgba(0, 0, 0, 0.1); 
    background: transparent; 
    color: #252525; 
    font-size: 1.25em; 
    padding: 0.65em 2em; 
    text-transform: uppercase; 
    position: relative; 
    overflow: hidden; 
} 


/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn:before, 
.btn:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 2px; 
    background: #ff0000; 
    transition: all 0.85s; 
} 


/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn:before { 
    top: 0; 
    transform: translate3d(-105%, 0, 0); 
} 


/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn:after { 
    bottom: 0; 
    transform: translate3d(105%, 0, 0); 
} 


/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn > span:before, 
.btn > span:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: #ff0000; 
    transition: all 0.85s; 
} 


/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn > span:before { 
    left: 0; 
    transform: translate3d(0, 105%, 0); 
} 


/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn > span:after { 
    right: 0; 
    transform: translate3d(0, -105%, 0); 
} 


/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn:hover:before, 
.btn:hover:after, 
.btn:active:before, 
.btn:active:after, 
.btn:focus:before, 
.btn:focus:after { 
    transform: translate3d(0, 0, 0); 
} 


/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 

.btn:hover > span:before, 
.btn:hover > span:after, 
.btn:active > span:before, 
.btn:active > span:after, 
.btn:focus > span:before, 
.btn:focus > span:after { 
    transform: translate3d(0, 0, 0); 
} 

今の問題は、国境I :beforeと:after疑似要素を使用して作成した場合、アンカータグの境界の上に正確に配置しないと、ボタン内の2ピクセルのように見えます。

私はbox-sizing:border-boxプロパティを追加しましたが、同じ結果が得られます。なぜ、アンカーボーダーの上に擬似要素を配置できないのですか？

FIDDLE HERE

私は次のプロパティを使用していたが、それでも望ましい結果得ることはありません見ることができるように：擬似要素は、彼らがしている要素の子であるため

*,*:before,*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 1

をこの場合アンカーbtnに適用された場合、その境界線はbtnの上に揃えられず、すぐ内側に揃えられます。

box-sizing:border-boxを追加してもそれは変わりません。その目的は、設定されたボーダー/パディングサイズがその設定された幅に含まれるべきであることを要素に伝えることです。

したがって、負の位置にするか、この場合は最も単純な方法で疑似を移動するか、プロパティの一部をspanに移動する必要があります。

.btn { 
    display: inline-block; 
    background: transparent; 
    position: relative; 
    overflow: hidden; 
} 

.btn span { 
    display: inline-block; 
    border: 2px solid rgba(0, 0, 0, 0.1); 
    color: #252525; 
    font-size: 1.25em; 
    padding: 0.65em 2em; 
    text-transform: uppercase; 
} 

スタックがちょうど1つのより多くの質問

/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 

 
/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 

 
/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 

 
/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
a:hover, 
 
a:active, 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 

 

 
/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn { 
 
    display: inline-block; 
 
    background: transparent; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.btn span { 
 
    display: inline-block; 
 
    border: 2px solid rgba(0, 0, 0, 0.1); 
 
    color: #252525; 
 
    font-size: 1.25em; 
 
    padding: 0.65em 2em; 
 
    text-transform: uppercase; 
 
} 
 

 

 
/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn:before, 
 
.btn:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 2px; 
 
    background: #ff0000; 
 
    transition: all 0.85s; 
 
} 
 

 

 
/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn:before { 
 
    top: 0; 
 
    transform: translate3d(-105%, 0, 0); 
 
} 
 

 

 
/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn:after { 
 
    bottom: 0; 
 
    transform: translate3d(105%, 0, 0); 
 
} 
 

 

 
/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn > span:before, 
 
.btn > span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 2px; 
 
    background: #ff0000; 
 
    transition: all 0.85s; 
 
} 
 

 

 
/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn > span:before { 
 
    left: 0; 
 
    transform: translate3d(0, 105%, 0); 
 
} 
 

 

 
/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn > span:after { 
 
    right: 0; 
 
    transform: translate3d(0, -105%, 0); 
 
} 
 

 

 
/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn:hover:before, 
 
.btn:hover:after, 
 
.btn:active:before, 
 
.btn:active:after, 
 
.btn:focus:before, 
 
.btn:focus:after { 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 

 
/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */ 
 

 
.btn:hover > span:before, 
 
.btn:hover > span:after, 
 
.btn:active > span:before, 
 
.btn:active > span:after, 
 
.btn:focus > span:before, 
 
.btn:focus > span:after { 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 

 
/*# sourceMappingURL=../css/style.map */

<a href="" class="btn"> 
 
    <span> 
 
     \t Hover on Me 
 
    </span> 
 
</a>