0

quiero aumentar la longitud de los subrayados de los enlaces, os enseño el código y lo que quiero conseguir:

.a-footer{
font-size: 30px;
color: white;
text-decoration: none;
border-bottom: 2px solid white;
padding-bottom: 10px; 

}

Según lo tengo me aparece así:

introducir la descripción de la imagen aquí

Y el resultado que quiero sería algo así:

introducir la descripción de la imagen aquí

No sé muy bien cómo hacerlo... Si me echaran una mano, se lo agradecería.

Muchas gracias!!

Edit: Agrego el HTML

<footer>

    <div class="container footer-1 row align-items-center">
        <a href="#" class="a-footer">Supermercados</a>
        <a href="#" class="a-footer">Folletos</a>
        <a href="#" class="a-footer">Otros Servicios</a>
        <a href="#" class="a-footer">Redes Sociales</a>
    </div>

Las reglas son estas:

.container{
padding-left: 30px;
padding-right: 30px;

}

.footer-1{
background-color: rgb(41, 123, 60);
height: 10vh;

}

La de row y align-items-center es simplemente para flex

4
  • Agrega el HTML del asunto
    – Yussef
    Commented el 10 ene. a las 15:31
  • Ya está todo! Gracias
    – oli699
    Commented el 10 ene. a las 15:48
  • Prueba definir un width en tus elementos a-footer
    – Yussef
    Commented el 10 ene. a las 15:58
  • Tan fácil que era. y juraría que probé con width anteriormente... qué rabia! Muchas gracias compa
    – oli699
    Commented el 10 ene. a las 16:04

2 respuestas 2

0

Prueba con esto.

En este código, el pseudo-elemento ::after crea un subrayado debajo de cada enlace. Puedes ajustar la propiedad width para cambiar la longitud del subrayado.

.container{
  padding-left: 30px;
  padding-right: 30px;
}

.footer-1{
  background-color: rgb(41, 123, 60);
  height: 10vh;
}

.a-footer {
    font-size: 30px;
    color: white;
    text-decoration: none;
    position: relative;
    padding-bottom: 10px;
}

.a-footer::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: white;
}
<footer>

    <div class="container footer-1 row align-items-center">
        <a href="#" class="a-footer">Supermercados</a>
        <a href="#" class="a-footer">Folletos</a>
        <a href="#" class="a-footer">Otros Servicios</a>
        <a href="#" class="a-footer">Redes Sociales</a>
    </div>

</footer>

3
  • Gracias compa. Con aumentar el width en .a-footer es suficiente
    – oli699
    Commented el 10 ene. a las 16:05
  • @oli699 pon entonces como respuesta qué has hecho finalmente. Luego, acepta la respuesta que te ha sido útil.
    – padaleiana
    Commented el 10 ene. a las 16:31
  • Okey, pero no me deja hasta que pasen 22 horas
    – oli699
    Commented el 11 ene. a las 16:25
0

Bastaba con añadir width a la regla .a-footer

.a-footer{
font-size: 30px;
color: white;
text-decoration: none;
border-bottom: 2px solid white;
padding-bottom: 10px; 
margin-right: 80px;
width: 50%;
}

En este caso al crear una regla para esos enlaces lo que he hice fue quitarle el subrayado de serie de los enlaces y ponerle uno con border-bottom y con padding bottom bajarlo a la altura que lo quería. Y ya luego con width aumento esa longitud, que no grosor. Si quieres más grosor lo añades en border-bottom

6
  • por que un width ??? Commented el 11 ene. a las 16:47
  • Pues en este caso al crear una regla para esos enlaces lo que he hice fue quitarle el subrayado de serie de los enlaces y ponerle uno con border-bottom y con padding bottom bajarlo a la altura que lo quería. Y ya luego con width aumento esa longitud, que no grosor. Si quieres más grosor lo añades en border-bottom. Actualizo mi respuesta y a ver si te sirve
    – oli699
    Commented el 11 ene. a las 17:05
  • 1
    bueno trata de colocar todo los argumentos de tu respuesta en la respuesta junto al codigo, no esperes a que te vengan a preguntar... Commented el 11 ene. a las 17:12
  • Soy nuevo en el foro y voy con el tiempo justo la verdad. Lo siento, me iré haciendo, pero también hay formas de decir las cosas!!
    – oli699
    Commented el 11 ene. a las 18:11
  • y por que eres nuevo es que te tratan de orientar en como usar el sitio. Commented el 11 ene. a las 18:32

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.