0

como hago que la barra negra este justo en el centro cada vez que pase el raton se que es con after pero como la dejo en el centro y con el mismo tamaño. La verdad no encuentro en toda la web como hacerlo. Les dejo el css siguiente y una imagen muy clara donde se ve que al pasar el raton la barra queda a un lado y no en el centro como quisiera, en el codigo css el nav tiene la clase menu y el ul tiene la clase items__menu

adjunto imagen:introducir la descripción de la imagen aquí

:before,
:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}
body {
  margin: 0;
  font-family: 'News Cycle', sans-serif;
  background-color: #33e0ff;
  color: #4a235a /*#f4f6f7*/;
}

.menu {
  background-color: #ffe333;
  position: relative;
  height: 75px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.6);
}

.logo__menu {
  color: #4a235a;
  font-size: 35px;
  padding: 0 80px;
  font-weight: bold;
}

.items__menu {
  display: flex;
  list-style: none;
  margin-right: 30px;
}

.items__menu li {
  border-radius: 3px;
  margin: 0 5px;
}

.items__menu li a {
  padding: 7px 13px;
  text-decoration: none;
  font-size: 18px;
  display: block;
  text-transform: uppercase;
  color: #4a235a;
}

.items__menu li:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}
li:hover::after {
  content: '';
  position: absolute;
  background-color: #000;
  height: 3px;
  width: 10px;
  bottom: 10px;
  transition: 0.4s;
}
5
  • 1
    Falta mucha información para poder ayudarte, favor leer el apartado "Como preguntar?". En estos casos es mejor pasar html y css para poder entender como tenés armado todo y hacer pruebas para ayudarte. Tampoco se entiende bien que es lo que deseas hacer, en esos caso es mejor quizás pasar alguna imagen de ejemplo y explicar el comportamiento que deseas. Commented el 26 dic. 2021 a las 20:20
  • solo quiero que la barra de la imagen quede en el centro al pasarle el mouse el codigo es css el que pase si ves a lo ultimo } li:hover::after { content: ''; position: absolute; background-color: #000; height: 3px; width: 10px; bottom: 10px; transition: 0.4s; } ahi aplico after para lograr esa barra negra pero quiero que este justo al centro y nada mas... como puedo alinearla eso es codigo css Commented el 26 dic. 2021 a las 20:36
  • 1
    Tal como te indicaron... si no pones el HTML también, cómo vamos a ayudarte? Que crees que nuestras cabezas generan el html a partir de la foto que adjuntaste?? Me temo que somos programadores, no ordenadores. Pon el HTML para que podamos probarlo y ver si podemos arreglarlo hombre! Puedes usar el enlace para editar
    – Benito-B
    Commented el 26 dic. 2021 a las 21:28
  • <nav class="menu"> <label class="logo__menu">THE SUNSHINE NEWS</label><ul class="items__menu"> <li class="activo__menu"><a href="#">Inicio</a></li> <li><a href="#">Entertainment</a></li> <li><a href="#">Fashion</a></li> <li><a href="#">Lifestyle</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Videos</a></li> </ul> <div class="div1"><div class="div2"></div></div> <span class="btn__menu"><i class="fas fa-align-justify"></i> </span> </nav> <script src="kit.fontawesome.com/cc26e9b68f.js" crossorigin="anonymous"> Commented el 26 dic. 2021 a las 21:43
  • la segunda parte del html: <script href="script.js"></script> </body> </html> Commented el 26 dic. 2021 a las 21:44

1 respuesta 1

0

Felices fiestas ! Según entiendo, simplemente mover la barra negra de 10px al centro del li.

Es muy fácil entendiendo las posiciones de un elemento posicionado absolutamente con sus respectivas declaraciones: bottom, left, margin etc.

Lo que hice es mover al centro con left:50%, lo que significa que esté a la mitad delli. Pero siendo la barra negra de 10px y cada li variable en su anchura, no quedaría perfectamente al centro sino, un poco demás. Entonces la solución completá y correcta sería moviendo al centro con un márgen left de 50% y restándole la mitad del ancho de la barra negra que sería: 5px:

li:hover:after { 
 left: calc(50% - 5px);
}

Puede parecer confuso o complicado el calc() pero es cuestión de práctica y lógica: simplemente calcula 50% - 5px; (el - 5px equivale la mitad de la barra negra).

EXTRA. Adicionalmente agregué otro efecto de la barra negra y esta comentado en CSS.

 

:before, :after {
 box-sizing: border-box; 
 margin: 0;
 padding: 0; 
 outline: 0; 
} 

body { 
 margin: 0; 
 min-height: 555px;
 font-family: 'News Cycle', sans-serif;
 background-color: #33e0ff;
 color: #4a235a /*#f4f6f7*/;
}

.menu { 
 background-color: #ffe333; 
 position: relative; 
 height: 75px;
 width: 100vw;
 display: flex; 
 justify-content: space-between;
 align-items: center; 
 border-bottom: 1px solid #fff;
 box-shadow: 5px 0 10px rgba(0, 0, 0, 0.6);
}

.logo__menu { 
 color: #4a235a;
 font-size: 35px;
 padding: 0 80px;
 font-weight: bold;
} 

.items__menu {
 display: flex;
 list-style: none; 
 margin-right: 30px; 
 background: red
} 

.items__menu li {
 position:relative;
 border-radius: 3px; 
 margin: 0 5px;
} 

/* SOLUCIÓN */

.items__menu li:after {
 content: ''; 
 position: absolute; 
 background-color: #000; 
 height: 3px;
 width: 10px; 
 bottom: 0;
 left: 10px;
 margin: 0 auto;
 transition: 0.4s ease-in-out;
}

li:hover:after { 
 left: calc(50% - 5px);
}


/* OPCIÓN DOS  */
/*
.items__menu li:after {
 content: ''; 
 position: absolute; 
 background-color: #000; 
 height: 3px;
 width: 10px; 
 bottom: 0;
 left: calc(50% - 5px);
 margin: 0 auto;
 transition: 0.4s ease-in-out;
}

li:hover:after { 
 left: 0;
 width: 100%; 
}
*/

.items__menu li a { 
 padding: 7px 13px;
 text-decoration: none;
 font-size: 18px;
 display: block; 
 text-transform: uppercase;
 color: #4a235a;
} 

.items__menu li:hover { 
 background-color: rgba(0, 0, 0, 0.3);
 transition: 0.4s;
}
 

<!DOCTYPE html>

<html>
 <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>Barra hover en menú</title>
  <link rel="stylesheet" href="styles.css">  
  
  
 </head>
 <body>
  
  <nav class="menu"> 
   
   <label class="logo__menu">THE SUNSHINE NEWS</label>
   
   <ul class="items__menu">

<li class="activo__menu">
 <a href="#">Inicio</a>
</li>
<li>
 <a href="#">Entertainment</a>
</li>
<li>
 <a href="#">Fashion</a>
</li>
<li>
 <a href="#">Lifestyle</a>
</li>
<li>
 <a href="#">Pictures</a>
</li>
<li>
 <a href="#">Videos</a>
</li>
   </ul> 
   
   <div class="div1">

<div class="div2"></div>

   </div>
   
   <span class="btn__menu">
<i class="fas fa-align-justify"></i> 

   </span> 
  
  </nav>
  
  
 </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.