Tenho o seguinte código, que é o menu da minha aplicação:
<div class="mainmenu-area" data-spy="affix" data-offset-top="100">
<div class="container">
<!--Logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img class="logo" src="">
</a>
</div>
<!--Logo/-->
<nav class="collapse navbar-collapse" id="primary-menu">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home-page">Início</a></li>
<li><a href="#service-page">Facilidades</a></li>
<li><a href="#feature-page">Recursos</a></li>
<li><a href="#price-page">Planos</a></li>
<!-- Isto poderá ser utilizado mais adiante <li><a href="#team-page">Team</a></li> -->
<li><a href="#faq-page">FAQ</a></li>
<li><a href="{{route('login')}}" class="login"><span class="un">Área Restrita </span><span class="ti-lock"></span></a></li>
</ul>
</nav>
</div>
</div>
Nele tenho um <span>
no último elemento <li>
ao qual eu apliquei o seguinte CSS:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 1px;
display: block;
background: #ffffff;
transition: 400ms;
}
.un:hover:after {
width: 100%;
}
Minha dúvida é: existe alguma forma de eu fazer com que este estilo da classe un
seja disparada quando eu faça o hover no elemento pai apenas utilizando CSS?
Do jeito que eu fiz funciona quando eu passo o mouse em cima do <a>
, porém por questões de layout gostaria que o efeito fosse disparado quando eu passo o mouse em cima do elemento pai.
Abaixo é o resultado que eu tenho no momento:
<li>
então teria que subir 2 níveis certo?