title: How to make an invisible character in HTML, that still get's picked up on text selection?
body: <h3>Backstory</h3>
  
  <p>So I am doing a webchat as a side-project, and one of the issues I am encountering is making the UX of copying and pasting messages friendly.</p>
  
  <p>Right now all of the elements are organized within their own tags, spaced out and separated with CSS rules, in a way that if you try copying a part of the chat log, it comes out as <code>23:49userHello World</code>.</p>
  
  <p>The solution I have thought of is to have a zero-width tab character separating them, that still gets picked up by text selection, and when pasted as raw text is just a normal tab. This would not only separate it in copy paste actions, but it would make it super easy to parse using <code>awk</code>.</p>
  
  <h3>TL;DR</h3>
  
  <p>How would I modify a printable tab character (<code>&amp;#09;</code>) with CSS, or any character by that matter, in a way that it's invisible to the layout, but still gets picked up in text selections?</p>