Can text generated by pseudo-elements be selected by the user?

Question

I am digitizing a 75-page job index. Users should be able to communicate with each competency, competencies are significantly grouped, and competencies are often long sentences. Therefore, instead of using each competency text as an anchor, I create a labeling scheme and create an anchor for each element. The competence “Know your right hand from the left” may be labeled “E .1.A.2.2”. This is tiring.

I'm trying to save themselves from the addition of new labels for each qualification again (as I have already said it once anchored.) To show the label, I can use the pseudo- :beforeto generate a label from the anchor {content: attr(name);}.

This works well, but the generated text is not selectable. To create a link to a specific competency, users will have to manually enter "# E.1.A.2.2", which causes more user errors than I would have thought.

Is it possible to make text generated using a pseudo-element that can be selected? I am open to other suggestions. If creating each label in HTML is the only way to get the result you want, I'll do it. But oh.

Answer 1

To make it accessible and indexable by search engines, I think the only way is to add content using JS

For example, jQuery code:

$div.prepend("<span>My Text</span>")