html - tachar - ¿Cómo cambiar el grosor de tachado/línea en CSS?
texto tachado css (10)
Aquí hay un método CSS puro que no requiere ningún elemento de envoltura innecesario. Como bono adicional, no solo puede ajustar el grosor del tachado, sino que también puede controlar su color por separado del color del texto:
.strikeout {
font-size: 4em;
line-height: 1em;
position: relative;
}
.strikeout::after {
border-bottom: 0.125em solid red;
content: "";
left: 0;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}
<span class="strikeout">Struck out text</span>
Usa colores RGBa para hacer el tachado semi-transparente:
.strikeout {
font-size: 4em;
position: relative;
}
.strikeout::after {
border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
content: "";
left: 0;
line-height: 1em;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}
<span class="strikeout">Struck out text</span>
¡O incluso hacer el tachado un gradiente! Solo use un background combinado con una height , en lugar de un border :
.strikeout {
font-size: 4em;
line-height: 1em;
position: relative;
}
.strikeout::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));
content: "";
height: 0.125em;
left: 0;
margin-top: calc(0.125em / 2 * -1);
position: absolute;
right: 0;
top: 50%;
}
<span class="strikeout">Struck out text</span>
Esto funciona en IE9 (sin gradiente) y hacia arriba, o incluso en IE8 si usa los dos puntos simples :after sintaxis y escriba manualmente el valor del margin-top negativo margin-top lugar de usar calc() .
El principal inconveniente es que esto solo funciona en una sola línea de texto. Pero oye, tomas lo que puedes obtener ;-)
Estoy usando la text-decoration: line-through en CSS, pero parece que no encuentro ninguna forma de variar el grosor de línea sin cortes no elegantes como <hr> o superposiciones de imágenes.
¿Hay alguna manera elegante de especificar el grosor de una línea a través?
El grosor de la línea está determinado por la fuente (familia, tamaño, etc.). No hay ninguna disposición en CSS para cambiar esto http://www.w3.org/TR/REC-CSS1/#text-decoration
Esta parece ser una pregunta de larga data sin una solución ideal para tachas multilínea.
Convenientemente, utilizando gradientes CSS, puede ajustar fácilmente el grosor de su línea de la siguiente manera:
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
Vea la demostración y el prefijo del proveedor completo aquí: http://codepen.io/pearlchen/pen/dhpxu
Esto no responde a la pregunta, pero es relevante ya que resuelve la falta de una huelga única mediante el uso de scripts. No soy un purista, pero creo que esta es una solución de x-browser.
<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
$(this).wrap("<span style=''position:relative;left:0px;top:0px;''>").
before( "<span style=''margin-top:10px;border-top:1px solid #FF0000;"+
"position:absolute;width:100%;left:0px;''></span>" ).
wrap("<span style=''position:relative;left:0px;top:0px;''>");
}
$(function(){
$(''.strike_out'').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class=''strike_out''>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>
He encontrado otro enfoque para el texto multilínea:
span {
background: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII='');
background-repeat: repeat-x;
background-position: center;
}
http://output.jsbin.com/weqovenopi/1/
Este enfoque asume la repetición de una imagen (1px de ancho y npx de altura). También funciona de forma independiente en el tamaño de fuente.
Sólo una desventaja: el fondo se representa debajo del texto.
Me doy cuenta de que esto es antiguo, pero hay una manera de hacerlo usando etiquetas de rango anidadas:
<span style="text-decoration: line-through; font-size: 2em;">
<span style="font-size: 0.5em; vertical-align: middle;">
Striked Text
</span>
</span>
El tachado depende del tamaño de la fuente, por lo que si dobla el tramo exterior hará que la línea sea dos veces más gruesa. Entonces, necesitas reducir el interior a la mitad. La alineación vertical es necesaria o, de lo contrario, la línea es demasiado alta, lo que hace que parezca casi una línea superior.
En acción: http://jsfiddle.net/moodleboy/deep3qw8/
Funciona en Chrome / FF, pero no en Safari, IE10 u Opera. Funciona en Chrome en Mac, pero no en Windows.
No pude encontrar un método apropiado aquí, así que utilicé una imagen de fondo con un linear-gradient y unidades de longitud ex CSS .
Desafortunadamente, esto significa que el uso de diferentes tipos de letra hará que el tachado se encuentre en una posición ligeramente diferente (si las fuentes tienen diferentes alturas de x).
.container {
width: 300px;
}
.multiline-strikethrough {
display: inline;
background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}
.alt-1 {
font-family: sans-serif;
font-size: 2rem;
}
.alt-2 {
font-family: sans-serif;
font-size: 4rem;
line-height 1;
}
<div class="container">
<p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>
<div class="container">
<p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>
<div class="container">
<p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>
No.
Sin embargo, si el color de tachado es el mismo que el color del texto, puede utilizar fácilmente una imagen personalizada en el fondo.
Si necesita colores diferentes, la única forma de hacerlo es superponer la imagen de tachado personalizado.
Tengo una idea, pero requeriría agregar un elemento adicional para cada nivel de espesor.
html
<span><strike>test test</strike></span><br />
<span id="test"><strike> </strike></span>
css
span {height:1em}
#test {position:relative;top:-1.3em}
Por cierto, los espacios en el segundo tramo son especiales: tendrá que usar alt + 0160 o alt + 255.
También puede utilizar la unidad de píxeles en la parte superior negativa cuando ull intente posicionarla con precisión.
Hay otra alternativa que consiste en utilizar primero la decoración de texto y luego el estilo <strike> o <del> y ver si puede desplazarlo verticalmente sin mover el texto con él.
html
<span><strike>test test</strike></span>
css
span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}
Ambos están funcionando bien aquí, pero recuerde usar un tipo de documento de transición porque <strike> ha quedado en desuso.
respuesta corta: no. depende de la fuente, es el mismo para el grosor del subrayado: cambia con el grosor del texto