underline a paragraph having word-spacing set

Question

When using word-spacing in an underlined element, if the element contains spans, spaces are not correctly underlined making it really ugly...

Is there a work around for that?

p {
  text-decoration: underline;
  word-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

Edit:

I found this trick that is almost satisfying for my use case:

p {
  text-decoration-line: underline;
}
span:after {
  content: ' ';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

The issue is that I would like to use it with a Zero-width space, like \u200B, but for some reason, it doesn't work. Maybe I'm doing it wrong...

p {
  text-decoration-line: underline;
}
span:after {
  content: '\200B';
  letter-spacing: 1em;
}

<p>
  <span>test</span>
  <span>test</span>
</p>

Answer 1

A workaround is to remove the white space between the spans and use a hack with pseudo element to simulate word-spacing. It works but it remain a hacky solution:

p {
  text-decoration: underline;
  word-spacing: 1em;
  display:flex; /*remove white space*/
}

span:not(:last-child)::after {
  content:"\00a0";
}

<p>
  <span>test</span> <span>test</span>
</p>
<p>
  test test
</p>

If you will only have spans you can do it like this:

p {
  text-decoration: underline;
}

span:not(:last-child)::after {
  content:" ";
  letter-spacing: 1em;
}

<p>
  <span>test</span> <span>test</span>
</p>

Answer 2

Looking for the right workaround...

A quick workaround to fix the issue in Chrome would be to replace the spaces with  , but that will work only for a single line of text. If the text doesn't fit in a single line, it will overflow the parent element instead of breaking into multiple lines:

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;<span>test</span>
</p>

<p>
  <span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>&nbsp;<span>test</span>
</p>

Another workaround for that would be to also add a zero-width space to the mix:  ​, but you can see that the underline now extends before or after the text due to the   being displayed and underlined as well:

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>&nbsp;&#8203;<span>test</span>
</p>

<p>
  <span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>&#8203;&nbsp;<span>test</span>
</p>

✨ Space + Zero-Width Space to the rescue

Looks like we are getting somewhere... As we don't want the   to be displayed when it's at the end or the beginning of a line, let's use a normal space and a zero-width space: ​:

p {  
  text-decoration: underline;
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
}

<p>
  <span>test</span>&#8203; <span>test</span>
</p>

<p>
  <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>&#8203; <span>test</span>
</p>

Using additional HTML elements to get additional underline customization/styling options

Another option is to use a wrapping element to create the underline using a border or a box-shadow, which would also allow you to have some additional customization/styling options, as you can see in these examples:

p {
  word-spacing: 1em;
  width: 33.33333333%;
  border-right: 3px solid black;
  padding: 10px;
  margin: 0;
  float: left;
  box-sizing: border-box;
}

p:nth-child(3n) {
  border: none;
}

.fakeUnderline1 {
  border-bottom: 2px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline1:hover {
  border-bottom-color: cyan;
}

.fakeUnderline2 {
  border-bottom: 1px solid black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline2:hover {
  border-bottom-width: 3px;
}

.fakeUnderline3 {
  box-shadow: inset 0 -2px 0 0 yellow;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline3:hover {
  box-shadow: inset 0 -16px 0 0 yellow;
}

.fakeUnderline4 {
  overflow: hidden;
  box-shadow: 0 2px 2px -3px red;
  transition: box-shadow ease-in 75ms;
}

.fakeUnderline4:hover {
  box-shadow: 0 5px 5px -5px red;
}

.fakeUnderline5 {
  border-bottom: 1px dotted black;
  transition: border-bottom ease-in 75ms;
}

.fakeUnderline5:hover {
  border-bottom-style: solid;
}

.fakeUnderline6 {
  border-bottom: 2px solid blue;
  box-shadow: inset 0 -2px 0 0 red;
}

.fakeUnderline6:hover {
  border-bottom-color: red;
  box-shadow: inset 0 -2px 0 0 blue;
}

.fakeUnderline7 {
  text-decoration: underline;
}

<p>
  <span class="fakeUnderline1">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline2">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline3">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline4">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline5">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

<p>
  <span class="fakeUnderline6">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span> <span>test</span> <span>test</span>
    <span>test</span> <span>test</span>
  </span>
</p>

Even though the question is not about underline styling, note that if you only need some basic underline styling options and browser support is not an issue, you could use these properties instead of the solution above:

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-underline-position

More complex behaviour would be available once these experimental features are supported:

• text-decoration-skip
• text-decoration-skip-ink