html - resaltar - Editar grosor de línea de subrayado CSS ''subrayado''

subrayado html

Question

Ya que puede subrayar cualquier texto en CSS de esta manera:

H4 {text-decoration: underline;}

¿Cómo puede editar también esa ''línea'' que se dibuja, el color que obtiene en la línea se especifica fácilmente como ''color: rojo'', pero ¿cómo se edita la altura de la línea, es decir, el grosor?

¿Algunas ideas?

Answer 1

Aquí hay una forma de lograr esto:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Aquí hay un ejemplo: http://jsfiddle.net/AQ9rL/

Answer 2

La background-image también se puede usar para crear un subrayado.

Tiene que desplazarse hacia abajo a través background-position y repetirse horizontalmente. El ancho de línea puede ajustarse en cierto grado utilizando el background-size (el fondo está limitado al cuadro de contenido del elemento).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

Answer 3

Mi solución: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Puede ajustar la posición del subrayado con el valor de la altura de la línea, subrayar el grosor y el estilo con el borde inferior.

Tenga cuidado de desactivar el comportamiento de subrayado predeterminado si desea subrayar un href.

Answer 4

Muy fácil ... elemento "span" externo con letra pequeña y subrayado, y dentro de elemento "font" con letra de mayor tamaño.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Answer 5

Otra forma de hacerlo es usar ": after" (pseudo-elemento) en el elemento que desea subrayar.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Answer 6

Recientemente tuve que lidiar con FF, que subraya que era demasiado grueso y demasiado alejado del texto en FF, y encontré una forma mejor de manejarlo usando un par de sombras de caja:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

La primera sombra se pone encima de la segunda y así es como puedes controlar la segunda variando el valor de ''px'' de ambas.

Plus: varios colores, grosor y posición de subrayado

Menos: no se puede usar en fondos no sólidos

Aquí hice un par de ejemplos: http://jsfiddle.net/xsL6rktx/

Answer 7

Solución final: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Answer 8

Haré algo simple como:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• Puede usar line-height o padding-bottom para establecer la posición entre ellos
• Puede usar display: inline en display: inline en algunos casos

Demostración: http://jsfiddle.net/5580pqe8/