attributes - I'm trying to automatically use (nearly) the same text for the href="" and the <a> content </a> using css

Question

I want to do either <a href='#foo'>[[generate foo automatically]]</a> or <a href='#[[generate foo automatically]]'>foo</a>

I think I got that to work using CSS a few years ago but can not locate the trick now.

It might have been using xhtml??

Thanks.

question from:https://stackoverflow.com/questions/65840275/im-trying-to-automatically-use-nearly-the-same-text-for-the-href-and-the

Answer 1

You can display content of attributes via CSS: You can use any attribute, not just data-attributes. You can't do any string manipulations like truncating the # from the rendered text tough.

p::before {
  content: attr(data-test);
}

a::before {
  content: attr(href);
}

<p data-test="Hello"> World </p>
<a href="#Hello"> World </a>