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, я хочу, чтобы достичь его, используя границы дна, я ищу для этого в 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>