CODEWITHSUNDEEP
htmlcss
Vrisel
Vrisel

Reputation: 3

Can I insert some 'contents' within the text element?

I want to render some text, like from <span class="divided">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 class="divider">, 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?

Upvotes: 0

Views: 58

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

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 class="divided">ABCD</span>

Upvotes: 0

dale landry
dale landry

Reputation: 8610

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 class="divided">ABCD</span>

Upvotes: 1

Related Questions