tachado - subrayado html5
¿Puedo cambiar la posición vertical de un tachado en un sitio web? (5)
Estoy aplicando la etiqueta de tachado
<s>$5,000,000</s>
Pero la línea es demasiado baja ... es aproximadamente 1/4 desde la parte inferior en lugar de a través del medio. ¿De alguna manera puedo modificar esto para que pase un poco más por el medio?
Esta solución permite el relleno y utiliza la propiedad de paso de línea csss. Funciona para Firefox, y Chrome / Safari lo hace bien de todos modos.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
y el mark up es algo así como ...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
La otra solución es agregar una imagen de fondo de una línea y hacerla del mismo color que el texto.
He preparado este código que le da un control total sobre la posición y el estilo de tachado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I''d do it.</p>
</div>
</body>
</html>
No con la etiqueta de huelga, no. Es parte del motor de renderizado del navegador. Para mí (en Chrome) la línea se representa justo por encima de la mitad.
No puedes hacerlo con la etiqueta de huelga O con la text-decoration:line-through estilo de línea. La posición de línea está incorporada. Puedes usar tu propio estilo para eso, pero sería un gran PITA.
Podrías hacer algo como esto:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}