CSS letter-spacing together with line-through

Question

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>

related: https://stackoverflow.com/questions/4015263/css-text-underlining-too-long-when-letter-spacing-is-applied — Kaiido, May 30 '19 at 12:23
But are you really looking for a js solution too? To what extent? I mean any js solution would have to understand your layout better, for instance, is this fixed or could the breaks change with resize, dynamic element insertion, hover etc? — Kaiido, May 30 '19 at 12:26
I accept js solution too.. div/p with line-through can contain other html like ul, a, i so in JS solution must be every text row wrapped in span/div and listening to the window.resize event. — 5ulo, May 30 '19 at 12:31

Temani Afif · Accepted Answer · 2019-05-31T00:10:36.063

3

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>

edited May 31 '19 at 00:10

answered May 30 '19 at 12:03

Temani Afif

245,468
26
309
415

no time to check what happens but on FF seems like antialiasing makes things fuzzy: https://i.stack.imgur.com/qG29A.png – Kaiido May 30 '19 at 12:14
@Kaiido yes because of the small value of height (0.1em) and since it's not the same font, the value will not be the same and we will have subpixel rendring issue I guess – Temani Afif May 30 '19 at 12:22
1

@Kaiido I switched to px value, it's more safe ... we have to change it manually if we increase the font-size – Temani Afif May 30 '19 at 12:25
1

So far best 'mindblowing' solution which works under every intelligent browser.. according to *caninuse* box-decoration-break is not available in Edge (IE). – 5ulo May 30 '19 at 12:26
1

Very nice (nitpicking: unprefixed rule should go after -webkit-prefixed) – j.j. May 31 '19 at 00:08

CSS letter-spacing together with line-through

1 Answers1