Search code examples
htmlcssmarkdown

HTML/CSS: show (part of) hyperlink destination as link text without repetition in source code?

I'd like to automatically have a style for using (part of) the hyperlink destination as link text without manually repeating it in the source code. Context: I'm using a Markdown file (only basic HTML and CSS) to note down many external links to academic publications. For example, a link should look and work like journal.pbio.0020449, but without having to repeat the chunk journal.pbio.0020449 in the source code. Phrased differently, I'd like to automatically use the hyperlink destination as link text. If possible, only the last part of the displayed thereby. How could this be done?

So far, I only achieved to change the appearance of the link:

<style>
  a.doi {color: red;}
</style>

<a class="doi" href="https://doi.org/10.1371/journal.pbio.0020449">journal.pbio.0020449</a>
Solution

  • You could use the anchor element's after pseudo element to show the href value.

    <style>
  .doi::after {
    content: attr(href);
  }
</style>
<a class="doi" href="https://doi.org/10.1371/journal.pbio.0020449"></a>

    However, I don't recommend it if your site is for wide publication because screen reader users will not necessarily hear the value.