title: Is it possible to make CSS generated content searchable by a browser?
body: <p>I run a website that uses CSS pseudo-elements to insert text here and there.  One of them inserts the value of a CSS counter (whereupon it would require considerable re-engineering of the system to do this <em>without</em> CSS text injection).  The specific CSS rule is:</p>
  
  <pre><code>.num_defn .theorem_label:after {
      content: " " counter(definition, decimal);
      counter-increment: definition;
  }
  </code></pre>
  
  <p>and this converts "<strong>Definition</strong>" to "<strong>Definition 1</strong>" (say).</p>
  
  <p>However, the injected text is not searchable by the browser.  It doesn't see the <code>1</code>: if I search for "Definition 1" then it doesn't find it, and if I search for "Definition. Whatever the definition text was" then the browser happily highlights the line except for the inserted <code>1</code>.  So if you imagine the bold text as the highlighting, it would look like:</p>
  
  <p><strong>Definition</strong> 1 <strong>. Whatever the definition text was</strong></p>
  
  <p>This is not ideal!  People like to refer to definitions by their number and to say "Look at Definition 1 on the page XYZ" (and in contexts where hyperlinks are not available - strange, I know, but it does happen).</p>
  
  <p>Thus:</p>
  
  <ol>
  <li>Is there any way that I, on the server end, can designate the injected text as "searchable"?</li>
  <li>If not, is there a <strong>simple</strong> way at the browser end that this can be enabled?</li>
  </ol>