I want to render some text, like from <span >ABCD</span> to A | B | C | D.

' | ' should not be rendered as a normal text because it would lower the screen-reader accessibility.

Maybe I could do this with JavaScript, like

1. split the text
2. join them with <span >, where .dividier:not(:last-child)::after { content: ' | '; }
3. apply the result

But I think it's not a good way. I don't want to change the html itself.

Would it be possible only with CSS?

CodePudding user response：

Using javascript you can use .split('') and split the string into and array of characters, then use .join(' | ') to join the array back together into a string with the desired characters.

el.textContent.split('').join(' | ');

let divided = document.querySelector('.divided');

divided.textContent = divided.textContent.split('').join(' | ');

<span >ABCD</span>

CodePudding user response：

A CSS-only idea but you will need a monospace font

.divided {
  font-family: monospace;
  font-size: 50px;
  letter-spacing: 10px;
  background:
   repeating-linear-gradient(90deg,#000 0 3px,#0000 0 calc(1ch   10px))
   -6.5px 50%/100% 80% no-repeat;
   /*-6.5px = -(5   1.5) half the letter-spacing   3px
       1ch  = width of one letter
       3px  = width of the seperator
       80%  = height of the seperator
   */
}

<span >ABCD</span>