CSS - ボトムの長さを60％に固定

Question

ボーダーボトムの長さに関するヘルプが必要です。私はボーダーボトムの長さを60％に設定したい。私は以下のように、内側のdivを使用してそれを行うことができます。

#myDiv { 
 
    background: #FED; 
 
    _border-bottom: 5px solid red; 
 
} 
 
#myDiv div { 
 
    margin: 5px 0px; 
 
    width: 60%; 
 
    height: 5px; 
 
    background-color: red; 
 
}

<div id="myDiv"> 
 
    My div 
 
    <div></div> 
 
</div>

しかし、私は余分なdiv要素でそれを使用したくない、私はこのために、検索のborder-bottomを使ってそれを実現したいですGoogleとスタックには運がない。

ありがとうございます。

Answer 1

あなたはこのようpseudo elementを使用することができます。

#myDiv { 
 
    background: #FED; 
 
    position: relative; 
 
    
 
} 
 
#myDiv::after { 
 
    content: ""; 
 
    width: 60%; 
 
    height: 5px; 
 
    background: red; 
 
    position: absolute; 
 
    bottom: -5px; 
 
    left: 0; 
 
}

<div id="myDiv"> 
 
    My div 
 
</div>