css - tag - Hacer el borde inferior más cercano al texto

title tag html

Question

Quiero subrayar mi menú de navegación, pero el problema es que necesito que sea más grueso, así que estoy usando el borde inferior para poder establecer el ancho en 6px.

Parece que puedo imaginar cómo hacer que el borde aparezca más cerca del texto. Parece que hay un espacio de aproximadamente 10 píxeles entre el texto y el borde inferior en este momento y no quiero tener ninguno.

He intentado colocar otro div y posicionarlo en relación a cada {li} con {bottom: 10px} pero parece que no puedo hacer que funcione.

Esto es lo que tengo tan

CÓDIGO

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}

Answer 1

Intenta agregar esto:

padding-bottom: 5px;

a

#menu ul li a{

Answer 2

Intente this (origen ruso http://artgorbunov.ru/bb/soviet/20120510/ ) métodos del artículo (gradiente de fondo y http://jsfiddle.net/d3WG6/ )

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p>

a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }

Answer 3

La propiedad de margen no puede cambiar la posición del borde inferior, por lo que

La altura del elemento <a> definirá la posición de su borde inferior.

 #menu > ul > li > a {
      height: ;
 }

Answer 4

Puede utilizar una mezcla de line-height de line-height y margin para obtener tal efecto, de esta manera:

#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}

Answer 5

Tenía un problema similar a la pregunta original. Ha sido respondida aquí: https://.com/questions/18180490/move-border-bottom-closer-to-text

La solución anterior podría ayudar a otros que no pudieron obtener la solución a esta pregunta trabajando para ellos.

Answer 6

Utilizando display: inline-block; en combinación con border-bottom puede causar algunos saltos de línea de comportamiento extraño si los enlaces más largos contienen un salto de línea, consulte http://jsfiddle.net/PQZ9H/ . Alternativamente, puede usar una combinación de background-image background-position que tenga la ventaja de no tocar el valor de visualización.

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

Una desventaja es que es posible que deba definir una posición de fondo para cada tamaño de fuente que utilice.

Usando esta técnica, también puede eliminar el borde de los descendientes como g o y agregando

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

y

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

Ver http://jsfiddle.net/25XNY/1