До и после Hover Effect

Question

Я прочесывал веб-сайт до и после эффектов, и я просто не нашел ничего полезного. Это похоже на серое пространство CSS. Мне было интересно, как я буду делать такой эффект, как на домашней странице Twitter: это эффект зависания. http://imgur.com/a/jBikq. У него тоже есть переход, но я не уверен, как его реализовать. Опять же, я даже не уверен, что это используется до и после, я думаю, что это зависание, но любая помощь будет действительно оценена.

Вот мой код для моей навигации:

<div id="navbar3" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Nav header</li> 
         <li><a href="#">Separated link</a></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
        </li> 
       </ul> 
       </div> 

Answer 1

Вы можете сделать это с :after и :beforepseudo selector. Im создал пример основан на изображении, его выглядеть следующим образом:

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 

 
body{ 
 
    padding: 5%; 
 
} 
 

 
.exemple { 
 
    font-family: 'Roboto', sans-serif; 
 
    position: relative; 
 
    padding: 2.5% 3.5%; 
 
    text-decoration: none; 
 
    font-size: 0.9em; 
 
    color: #333333; 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
} 
 

 
.exemple:before { 
 
    font-family: 'FontAwesome'; 
 
    content: '\f0e7'; 
 
    font-size: 1.1em; 
 
    margin-right: 10px; 
 
} 
 

 
.exemple:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0px; 
 
    background: #20abe1; 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
} 
 

 
.exemple:hover { 
 
    color: #20abe1; 
 
} 
 

 
.exemple:hover:after{ 
 
    height: 4px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="exemple">Moments</a>

Working Fiddle

Answer 2

Вы можете определенно использовать ::before или вы можете анимировать границы/отступы и он будет создать тот же эффект роста. Рабочая скрипка здесь: FIDDLE

Answer 3

Вы не указали подробно о том, что вы пытаетесь воспроизвести. Я собираюсь предположить, что это подчеркивание, которое анимируется из нижней части элемента навигации.

Для этого вам нужно будет использовать переход CSS.

Упрощенная версия того, что делает Twitter, находится ниже. Они устанавливают высоту на <a> и <li> и добавляют границу к <a>. Поскольку они имеют overflow:hidden;, применяемые к границе <li>, граница, которую они применили к <a>, изначально скрыта.

При повороте <li> высота <a> уменьшена. Они используют переход на высоте, чтобы анимировать рамку вверх.

ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    float: left; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 
a { 
 
    display: block; 
 
    height: 40px; 
 
    padding: 0 10px; 
 
    line-height: 40px; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
    border-bottom: 3px solid #0c0; 
 
    transition: height 250ms ease-in-out; 
 
} 
 
li:hover a { 
 
    height: 37px; 
 
}

<ul> 
 
    <li><a href="#">One</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
</ul>

Вот еще один способ анимации в подчеркивании с псевдо элементами.

ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    position: relative; 
 
    float: left; 
 
} 
 
a { 
 
    display: block; 
 
    padding: 0 10px; 
 
    line-height: 40px; 
 
    text-decoration: none; 
 
} 
 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: block; 
 
    height: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: #0c0; 
 
    transition: height 250ms ease-in-out; 
 
} 
 
li:hover a:after { 
 
    height: 3px; 
 
}

<ul> 
 
    <li><a href="#">One</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
</ul>