问题
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:
- 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?
回答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.
来源：https://stackoverflow.com/questions/13296789/is-it-possible-to-make-css-generated-content-searchable-by-a-browser