title: Add content to the beginning of every line, like ::before does for the first line
body: <p>I am trying to style my <code>&lt;code&gt;/&lt;pre&gt;</code> tags without preventing the user from being able to highlight and copy the code properly.</p>
  
  <p>The way I was hoping to do this (see below) only works for the first line, and won't ever repeat.</p>
  
  <p>I'm sure this could be made to work using JavaScript, but I'm not sure what the best way to do that without a large amount of processing would be.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
  }
  
  code, pre {
    background: #e5f3ff;
  }
  
  code.styled,
  pre.styled {
    display: block;
    padding: 8px;
    margin: 8px 0;
    overflow-x: auto;
  }
  
  code.styled::before,
  pre.styled::before {
    content: "–";
    padding-right: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This is an example of using &lt;code&gt;::before&lt;/code&gt; to add content,&lt;br&gt;
  and still being able to highlight/copy text without copying prefix.&lt;/p&gt;
  &lt;pre class="styled"&gt;
  adb wait-for-device
  adb reboot-bootloader
  fastboot devices
  &lt;/pre&gt;
  &lt;p&gt;Note: You can copy the code without having to worry about the prefix.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is the best way that I could achieve a similar effect, but spanning every line?
  I am looking for a vanilla JavaScript method if possible.</p>