Is it possible to make CSS-added text searchable by a browser?

Posted by Andrew Stacey on Pro Webmasters See other posts from Pro Webmasters or by Andrew Stacey
Published on 2012-11-07T10:34:56Z Indexed on 2012/11/07 11:21 UTC
Read the original article Hit count: 292

Filed under:
|

I run a website that uses CSS pseudo classes 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 without CSS text injection). The specific CSS rule is:

.num_defn .theorem_label:after {
    content: " " counter(definition, decimal);
    counter-increment: definition;
}

and this converts "Definition" to "Definition 1" (say).

However, the injected text is not searchable by the browser. It doesn't see the 1: 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 1. So if you imagine the bold text as the highlighting, it would look like:

Definition 1 . Whatever the definition text was

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).

Thus:

  1. Is there any way that I, on the server end, can designate the injected text as "searchable"?
  2. If not, is there a simple way at the browser end that this can be enabled?

© Pro Webmasters or respective owner

Related posts about css

Related posts about search