css3之後是一個元素中的文本

Question

我的問題是:after元素是在元素中的文本。這裏有一個例子：

On CodePen

我想:after是文字的下方。

我該如何解決這個問題？

body { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    background: #222; 
 
    color: #f3f3f3; 
 
    font-size: 2em; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
a:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #00A3A3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<a href="#">Home page</a>

Answer 1

在after CSS只要改變top:0到top:50px;。保持top:0

top屬性將元素的頂部邊緣設置爲位於其最近定位的祖先的頂部邊緣之上/之下的單元。

你被保持它的0

body { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    background: #222; 
 
    color: #f3f3f3; 
 
    font-size: 2em; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
a:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #00A3A3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50px; 
 
}

<a href="#">Home page</a>

Answer 2

使用top: 100%的:after僞元素來放置它究竟是主元素下面讓留在頂部的元素。

body { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    background: #222; 
 
    color: #f3f3f3; 
 
    font-size: 2em; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
a:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #00A3A3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
}

<a href="#">Home page</a>

Answer 3

所以，你已經創建了：層定義背景後。您可以使用：之前作爲另一個背景的第二層，而不是在根錨點元素上定義背景。或者你可以在錨點內創建一個內聯元素，並使用更大的Z-index來定位它。

這裏是代碼片段爲您

body{ 
 
    text-align:center; 
 
} 
 
a{ 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    padding: 10px; 
 
    color:#f3f3f3; 
 
    font-size:2em; 
 
    margin:20px auto; 
 
    position:relative; 
 

 
} 
 
a:after, a:before{ 
 
    content:""; 
 
    width: 100%; 
 
    left:0; 
 
    top:0; 
 
    position:absolute; 
 
} 
 
a:after{ 
 
    height:50%; 
 
    background: #00A3A3; 
 
    z-index:-1 
 
} 
 
a:before{ 
 
    height:100%; 
 
    background: #222; 
 
    z-index:-1 
 
}

<a href="#">Home page</a>