Is it possible to make CSS-added text searchable by a browser?
- by Andrew Stacey
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:
Is there any way that I, on the server end, can designate the injected text as "searchable"?
If not, is there a simple way at the browser end that this can be enabled?
