Comment changer l'épaisseur barrée / traversée en CSS?

Question

J'utilise le text-decoration: line-through en CSS, mais je n'arrive pas à trouver de moyen de varier l'épaisseur de la ligne sans des hacks inélégants comme <hr> ou des superpositions d'image.

Existe-t-il un moyen élégant de spécifier l'épaisseur d'une ligne traversante?

Answer 1

Il s'agit d'une méthode uniquement propre à CSS:

CSS:

 .strikeout {
    position: relative;
}
.strikeout::after {
    border-bottom: 5px solid red;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
}
 

HTML:

 <span class="strikeout">Struck out text</span>
 

Je ne l'ai pas testé largement (et le navigateur doit évidemment prendre en charge le pseudo-sélecteur ::after ), mais il semble fonctionner correctement. Vous pouvez faire varier l'épaisseur et la couleur en changeant simplement les valeurs border-bottom .

Answer 2

Cela semble être une question de longue date sans solution idéale pour les barrages multi-lignes.

Idéalement, en utilisant des dégradés CSS, vous pouvez facilement ajuster l'épaisseur de votre ligne comme suit:

 strike {
    text-decoration: none;
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
 

Voir la démo et le préfixe complet du fournisseur ici: http://codepen.io/pearlchen/pen/dhpxu

Answer 3

réponse courte: non. cela dépend de la police, c'est la même chose pour l'épaisseur du soulignement - ça change avec l'épaisseur du texte

Answer 4

J'ai une idée mais il faudrait ajouter un élément supplémentaire pour chaque niveau de l'épaisseur.

html

<span><strike>test test</strike></span><br />  
<span id="test"><strike>           </strike></span>

css

span {height:1em}
#test {position:relative;top:-1.3em}

BTW, les espaces dans la deuxième travée sont specials - vous devrez utiliser les touches alt+0160 ou alt+255.
Vous pouvez utiliser les pixels de l'unité de trop sur le négatif haut quand ull essayez de le positionner précisément.

---

Il y a une autre alternative qui impliquent l'utilisation de la première text-decoration puis style <strike> ou <del> et voir si vous pouvez le déplacer verticalement sans déplacer le texte avec elle.

html

<span><strike>test test</strike></span>

css

span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}

Les deux fonctionnent très bien ici, mais n'oubliez pas d'utiliser un doctype transitionnel causer <strike> a été supprimée.

Answer 5

Non.

Cependant, si la couleur barrée est la même que la couleur du texte, vous pouvez facilement vous en sortir en utilisant une image personnalisée en arrière-plan.

Si vous avez besoin de différentes couleurs, la superposition de l'image barrée personnalisée est la seule solution.