ボトムボーダーCSSトランジションが横方向に伸びない

擬似要素でもう少し遊んで、リストアイテムの要素の下端をマウスで左に向かってシミュレートしたいと思っていました。残念ながら、私は、行のテキストの長さを成長させることができます、ちょうど完全なリスト項目の境界線の長さではありません。あなたは私が何を意味するか知っているのでボトムボーダーCSSトランジションが横方向に伸びない

私は、リスト項目の上に境界線を入れている

HTML：

<div id="orangeNavBar"> 
<ul> 
    <li>Home</li> 
    <li>Products</li> 
    <li>Company</li> 
    <li>Contact</li> 
</ul> 
</div>

CSS：

body 
{ 
margin: 0; 
} 

* 
{ 
margin: 0; 
padding: 0; 
} 

#orangeNavBar 
{ 
height: 45px; 
width: 627px; 
background-color: #E87966; 
margin-left: auto; 
margin-right: auto; 
margin-top: 15px; 
} 

ul 
{ 
list-style:none; 
} 

ul li 
{ 
float: left; 
display: inline-block; 
font-family: verdana; 
font-size: .9em; 
font-weight: bold; 
color: white; 
height: 45px; 
box-sizing: border-box; 
padding: 13.5px 20px; 
transition: color .3s; 
border: 1px solid black; 

} 

ul li::after 
{ 
display: block; 
content: ""; 
background: black; 
height: 2px; 
width: 0px; 
transition: width 0.2s ease; 
} 

ul li:hover::after 
{ 
width: 100%; 
} 

ul li:hover 
{ 
color: black; 
}

Link to Codepen

出典

2016-07-14 Theodore Steiner

あなたが追加した場合次のCSSは、期待どおりに動作するはずです：

ul li { 
    position: relative; 
} 

ul li:after { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

position: relativeは、擬似要素は全体<body>の代わり<li>の幅と高さによって制約されていることを確認する必要があります。

擬似要素のposition: absolute;は、<li>要素の左下（bottom: 0; left: 0;）に要素を固定することができます。

出典

2016-07-14 18:35:21

ユーレカ！どうもありがとう！ –

あなたは大歓迎です！ –

タグでテキストを囲む必要があります。
それにposition:relativeを割り当て、liの値をspanに移動します。 となりますので、border-bottomはテキストの下にのみ適用されます。
アライメントを完璧にするために、いくつかのCSSプロパティを変更する必要があります。ここで

プロジェクト

HTMLの私の作業codepen抜粋です：

<ul> 
    <li><span>Home</span></li> 
    <li><span>Products</span></li> 
    <li><span>Company</span></li> 
    <li><span>Contact</span></li> 
</ul>

CSS：

ul li span { 
    display:block; 
    padding: 13.5px 0; 
    position: relative; 
} 
ul li span::after { 
    display: block; 
    content: ""; 
    background: black; 
    height: 3px; 
    width: 0px; 
    transition: width 0.2s ease; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
ul li:nth-child(n+1)::before { 
    top: 20px; 
} 
ul li:hover span::after { 
    width: 100%; 
}

出典

2016-07-15 05:51:42 vishnu

ボトムボーダーCSSトランジションが横方向に伸びない

答えて

関連する問題