¿Cómo diseñar un botón de borde para que el ancho coincida con el texto anterior en CSS?

Quiero limpiar antes y después del texto seleccionado de navegación, para que coincida el borde inferior con el texto de arriba, como en el ejemplo a continuación.

Aquí lo que tengo hasta ahora:

.nav-link {
    padding-right: 29px;
    padding-left: 29px;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }

.nav-link.active {
    border-bottom: 1.5px solid #000;
    color:  #000;
  }
<div class="container">
<nav role="navigation" class="menu">
  <a href="#" class="nav-link active item">One</a>
  <a href="#" class="nav-link item">Two</a>
  <a href="#" class="nav-link item">Three</a>
  <a href="#" class="nav-link item">Four</a>
  <a href="#" class="nav-link item">Five</a>
  <a href="#" class="nav-link item">Six</a>
  <a href="#" class="nav-link item">Seven</a>
</nav>
</div>
0
Jeff 13 oct. 2019 a las 05:49

3 respuestas

La mejor respuesta

En lugar de padding-right y padding-left use margin-right y margin-left.

.nav-link {
    margin-right: 29px;   /*use margin-right */
    margin-left: 29px;    /*use margin-left */
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }
.nav-link {
    margin-right: 29px;
    margin-left: 29px;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }

.nav-link.active {
    border-bottom: 1.5px solid #000;
    color:  #000;
  }
<div class="container">
<nav role="navigation" class="menu">
  <a href="#" class="nav-link active item">Cupertino</a>
  <a href="#" class="nav-link item">New York City</a>
  <a href="#" class="nav-link item">London</a>
  <a href="#" class="nav-link item">Amsterdam</a>
  <a href="#" class="nav-link item">Tokyo</a>
  <a href="#" class="nav-link item">Hong Kong</a>
  <a href="#" class="nav-link item">Sydney</a>
</nav>
</div>

Para eliminar el subrayado de todos los hipervínculos (etiqueta) use text-decoration:none;

a {
  text-decoration: none;
}
a {
  text-decoration: none;
}

.nav-link {
  margin-right: 29px;
  margin-left: 29px;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  font-family: Lato, sans-serif;
  color: rgba(51, 51, 51, 0.53);
  line-height: 20px;
  font-weight: 300;
  cursor: pointer;
}

.nav-link.active {
  border-bottom: 1.5px solid #000;
  color: #000;
}
<div class="container">
  <nav role="navigation" class="menu">
    <a href="#" class="nav-link active item">Cupertino</a>
    <a href="#" class="nav-link item">New York City</a>
    <a href="#" class="nav-link item">London</a>
    <a href="#" class="nav-link item">Amsterdam</a>
    <a href="#" class="nav-link item">Tokyo</a>
    <a href="#" class="nav-link item">Hong Kong</a>
    <a href="#" class="nav-link item">Sydney</a>
  </nav>
</div>
1
Amaresh S M 13 oct. 2019 a las 05:09

¿Puede esto ayudarte?

.nav-link.active {
	border-bottom: 1.5px solid rgba(51, 51, 51, 0.53);
	box-shadow: inset -29px 0 0 0 #fff, inset 29px 0 0 0 #fff, inset 0 -1px 0 0 #000;
	color:  #000;
}
0
Zonaxor 13 oct. 2019 a las 03:25

Si entiendo su pregunta correctamente, puede agregar la clase que usa para el CSS que aplicó a la barra de navegación. Al otro elemento. Por ejemplo

Tokio

Puede usar la clase "css-style" y aplicarla al otro elemento que desea que css se aplique

A continuación, use

Estilo CSS: activo {\ códigos aquí para activo}

-1
kai000 13 oct. 2019 a las 03:01