Играйте еще несколько с псевдоэлементами, и я хотел смоделировать нижнюю границу элемента списка элементов, растущего слева при зависании. К сожалению, мне удастся получить строку, чтобы увеличить длину текста, а не длину границы полного элемента списка.Нижняя граница 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;
}
eureka! Большое спасибо! –
Добро пожаловать! –