5

I am digitizing a 75-page index of job competencies. Users need to be able to link to each competency, competencies are meaningfully grouped, and competencies are often a sentence long. So instead of using each competency's text as an anchor, I'm creating a labeling scheme and creating anchors for each item. The competency "Know your right hand from your left" might be given the label "E.1.A.2.2". This is tedious.

I'm trying to save myself from manually adding the label to every competency again (since I've already added it once in the anchor.) To show the label, I can use the pseudo-element :before to generate the label from the anchor, {content: attr(name);}.

That works nicely, but the generated text isn't selectable. To create a link to a specific competency, users will have to manually type in "#E.1.A.2.2", which invites more user error than I'd like to think about.

Is it possible to make text generated by a pseudo-element selectable? I'm open to other suggestions as well. If creating each label in HTML is the only way to get to the needed result, I'll do that. But ouch.

Nathan Swartzendruber
  • 103
  • 1
  • 9
  • I don't believe it's possible. That text isn't even readable by a screen reader. I believe you'll have to go the JS route for your particular task. – Bill Criswell Mar 23 '15 at 18:43
  • 2
    I just came across this question which confirms my theory: http://stackoverflow.com/questions/19914349/how-can-i-make-generated-content-selectable – Bill Criswell Mar 23 '15 at 18:50
  • This question might help: http://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript – TylerH Mar 23 '15 at 18:55
  • Thanks, sorry my search-fu isn't up to the task today. @TylerH that question is interesting, though I've given up on incremental counters. I have no JS experience and can sort of follow the conversation there. – Nathan Swartzendruber Mar 23 '15 at 19:12

1 Answers1

0

To make it selectable 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>")
phts
  • 3,889
  • 1
  • 19
  • 31