Can an list-item marker be made into a link?

2 days ago 4

ARTICLE AD BOX

Short answer: No, you cannot make a ::marker into a link.

The ::marker pseudo-element is not a real DOM node. It:

Cannot contain HTML

Cannot contain an <a> element

Cannot receive pointer events

Cannot have an href

So something like this will never work:

li::marker { content: "<a href='#1'>[1]</a>"; /* ❌ Not possible */ }

Recommended Solution

If you want the marker (e.g., [1]) to be clickable, you need to remove the default list marker and insert a real <a> element inside the <li>.

Example

<p> Some body text<sup><a id="1" href="#f1">[1]</a></sup>. </p> <h3>Footnotes</h3> <ul class="footnotes"> <li id="f1"> <a href="#1" class="backref">[1]</a> Some footnote text </li> </ul> .footnotes { list-style: none; padding-left: 0; } .backref { text-decoration: none; margin-right: 0.5em; }

Now [1] is a real anchor element and fully clickable.