Yo como un obediente frotend desarrollador debe crear subrayado con 2px relleno en lugar de 1px por defecto. Es existir solución simple para esto?

PS Yeahh chicos, yo sé acerca de div con negro backgrond el color y la 1px * Npx y la posición relativa, pero Es tan lentamente…

CSS3 tiene un montón de nuevas text-decoration propiedades de estos días. Por favor, echa un vistazo cocodrilo.io/css/text-decoration Ejemplo: texto-decoración-posición: bajo; y el texto-decoración-saltar: tinta; por Favor, tenga en cuenta que esto probablemente no es compatible con los navegadores más antiguos.

OriginalEl autor NiLL | 2011-11-07

5 Comentarios

  1. 28

    Usted podría ajustar el texto en una span y darle un border-bottom con padding-bottom:2px;.

    Así

    span{
        display:inline-block;
        border-bottom:1px solid black;
        padding-bottom:2px;
    }

    Ejemplo: http://jsfiddle.net/uSMGU/

    Con esta solución no se puede hacer relleno de 2px, sólo 3 o más ;-(
    No estoy seguro de lo que quieres decir @NiLL? Puedes ser más específico acerca de lo que no puedes hacer?
    En CSS existen bienes, – text-decoration:underline. Se dibuja una línea debajo del texto con relleno de 1px. Necesito un mismo efecto, pero con 2px.
    Mi entendimiento es que no se puede cambiar el valor predeterminado en text-decoration. Es por eso que necesita una solución, como lo he sugerido.
    impresionante, muy útil Jason, gracias.

    OriginalEl autor Jason Gennaro

  2. 9

    Una gran manera de hacer esto sin la adición y extra abarca y tener más control es el uso de la :after selector.

    Útil, especialmente para los menús de navegación:

    .active a:after {
        content: '';
        height: 1px;
        background: black; 
        display:block;
    }

    Si quieres más o menos espacio entre el texto y subrayar, añadir un margin-top.

    Si quieres una más gruesa subrayar, añadir más height:

    .active a:after {
        content: '';
        height: 2px;
        background: black; 
        display:block;
        margin-top: 2px;
    }
    Esto es genial, excepto que me estoy dando cuenta de que las ruinas de la alineación centrada horizontalmente con flexbox, porque se suma la altura del elemento.
    Voy a añadir una respuesta en aquí con mi solución que corrige la alineación horizontal problema.

    OriginalEl autor jake

  3. 6

    cómo sobre el uso de border-bottom:1px; padding:what-you-likepx

    OriginalEl autor Alex

  4. 0

    Este es mi solución…

    HTML

    <p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

    CSS

    p {
      color: red;
      text-decoration: none;
      position: absolute;
    }
    a:hover {
        color: blue;
    }
    p span {
        display:block;
        border-bottom:3px solid black;
        width: 50%;
        padding-bottom: 4px;
    }

    OriginalEl autor Daniel Hidalgo

  5. 0

    He usado @jake solución, pero me dio problemas con la alineación horizontal.

    Mis enlaces de navegación son flex fila, en el centro alineados y su solución causado que el elemento se desplazará hacia arriba, con el fin de mantenerse horizontal alineado en el centro.

    Me fijo por hacer esto:

    a.nav_link-active {
      color: $e1-red;
      margin-top: 3.7rem;
    }
    a.nav_link-active:visited {
      color: $e1-red;
    }
    a.nav_link-active:after {
      content: '';
      margin-top: 3.3rem;      //margin and height should
      height: 0.4rem;          //add up to active link margin
      background: $e1-red;
      display: block;
    }

    Para mantener la alineación horizontal para usted.

    OriginalEl autor agm1984

Dejar respuesta

Please enter your comment!
Please enter your name here