title: Hover over a pre - how to highlight a single line with plain CSS?
body: <p>I have some <code>&lt;pre&gt;</code> blocks.</p>
  
  <p>Would it be possible, using just CSS, to highlight single lines when hovering over them?</p>
  
  <p><strong>== Update ==</strong></p>
  
  <p>Here is some sample code:</p>
  
  <pre><code>&lt;pre&gt;
  #include &lt;stdio.h&gt;
  
  int main()
      {
         printf("Hello World");
         return 0;
      }
  &lt;/pre&gt;
  </code></pre>
  
  <p>When lines become longer it would be useful to have them highlighted when hovering.</p>
  
  <p>The source file can't be read via PHP, or I'd split it into separate <code>&lt;pre&gt;</code> lines, with a trivial <code>pre:hover</code> CSS.</p>
  
  <p><code>pre:nth-child</code> is not a solution, because code lines are not "children" in the CSS sense.</p>
  
  <p><code>pre:first-line</code> works, but of course just for the first line.</p>
  
  <p><strong>== Update 2 ==</strong></p>
  
  <p>Since CSS seems to be limited to <code>first-line</code>, and thanks to Zeke suggestion, I found an almost simple way to have what I want.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;pre id="raw"&gt;
  #include &lt;stdio.h&gt;
  
  int main()
      {
         printf("Hello World");
         return 0;
      }
  &lt;/pre&gt;
  &lt;!-- 1×1 transparent PNG for the onload --&gt;
  &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=" onload="PreHover()" /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#pre div:hover {
      background: #ff0;
  }
  </code></pre>
  
  <p>Vanilla Javascript:</p>
  
  <pre><code>function PreHover() {
      var output = '';
      var preBox = document.getElementById('raw');
      var txt = preBox.innerHTML.split('\n');
      for(var x=0;x&lt;txt.length-1;x++) {
          output = output + '&lt;div&gt;'+txt[x]+'&lt;/div&gt;';
      }
      preBox.innerHTML = output;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Marco_Bernardini/odyxae12/3/" rel="nofollow">JSFiddle here</a></p>