Is it possible to make CSS generated content searchable by a browser?

Question

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 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?

Confucianism

Is your search being preformed by your server side code ? – Florinda

@ryan No. It's the standard browser find-in-page. – Confucianism

If altering your server-side code to do this in your HTML is out of the question, you're only left with JavaScript. It should be pretty trivial. – Lachrymose

Answer 1

As far as I know there is no way. You could probably use JS to access that information, but it would be some sort of "hack" thing to do.

And I think it sort of makes sense, when you think about the purpose of HTML and CSS. As you may know HTML is meant to describe the semantic meaning of the content, while CSS is meant to control the appearance of the page. So in short if you add any text at all to your page using CSS it should only be there purely for stylistic purposes.

If it is actual text that should mean something to you site visitor you need to have it in your site directly as HTML.

As well the way you did this goes against best practices. Because if you were to disable to CSS, some of the content would disappear.

Reed

Thanks for the answer. I might quibble about your point, though. CSS counters are for counting things and presumably to display that count somewhere. If you have a long <ol> list you might say "Look at the thirtieth item" whereupon someone might search for 30.. I just tested it and that doesn't work either. It's debatable as to whether the 30. is inserted by CSS or HTML since there's a (non-standard but widely done?) default in HTML which can be overridden by CSS. – Confucianism

Well list bullets is only stylistic feature. Difference beetween <ol> and <ul> from point of semantics is that in <ol> you are sayinf that the order of the elements matter, whereas in <ul> you are saying it doesnt. But for example you can set the bulleting of <ul> as numbers if you want, and it still wouldnt be considered a part of the content.. vice versa you can change bullets of <ol> to be just circles. And again I would like to repeat, that anything you output via CSS should be strictly for stylistic purposes :) – Reed