CODEWITHSUNDEEP
javascripthtmlcss
5ulo
5ulo

Reputation: 799

CSS letter-spacing together with line-through

Is there any css/js solution how to center line through the text while using letter-spacing? While single line text it is possible to accomplish centered line-through thanks to pseudo element ::before or ::after, but that's not possible on block elements like <p> or <div>.

h2, p {
  letter-spacing: 1em;
  text-decoration: line-through;
  text-align: center;
}

p {
  letter-spacing: .5em;
}
<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</p>

Upvotes: 1

Views: 172

Answers (1)

Temani Afif
Temani Afif

Reputation: 274024

Here is an idea where you can rely on background and box-decoration-break to create the line-through and you can easily adjust its size and position. You will basically remove one letter spacing from the total width.

It's important to note that the background need to be applied to an inline element:

p {
  letter-spacing: .5em;
  text-align:center;
}

p span {
  background:    
    linear-gradient(#000,#000) /* Coloration */
    0 calc(50% + 0.2ex) /* position */
    /
    calc(100% - .5em) 1px  /* width height */
    no-repeat;
 -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
}
<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

Upvotes: 3

Related Questions