como puedo adaptar el container a los iconos y el container pasarlo al lado derecho
Código HTML:
Ver original<div style="background:#0099cc; font-size:22px; text-align:center; color:#FFF; font-weight:bold; height:100px; padding-top:50px;"> <a href="" data-info="Iniciar Sesión"><i class="fas fa-user-plus"></i></a> <a href="" data-info="Carrito"><i class="fas fa-shopping-cart"></i></a> <a href="" data-info="Perfil"><i class="fas fa-user-edit"></i></a> <a href="" data-info="Salir"><i class="fas fa-sign-out-alt"></i></a>
Código CSS:
Ver original.container > nav a {
display: inline-block;
position: relative;
text-align: center;
width: 2.5em;
height: 2.5em;
background: #fff;
border-radius: 50%;
margin: 0 0.1em;
border: 4px solid #47a3da;
}
.container > nav a:hover:before {
content: attr(data-info);
color: #47a3da;
position: absolute;
width: 600%;
top: 120%;
text-align: right;
right: 0;
pointer-events: none;
}
.container > nav a:hover {
background: #47a3da;