How can I make list counters clickable with only CSS and HTML

Issue

I have a list with numbering generated by CSS

ol>li {
  counter-increment: list;
}

ol>li::marker {
  content: '('counter(list, decimal) ')'
}

<ol type="1">
  <li id="MyID">A</li>
  <li>B</li>
</ol>

Is there a javascript-less way to make the counters (i.e. "(1)") clickable? My goal is to click on the counter and go to a link to that specific list item, something like www.mysite.domain/page#MyID. I am asking for a pure HTML+CSS because I am actually generating the html to be then pasted into a wiki.

Solution

You can use custom CSS Counter for this

.myList {
  counter-reset: myList;
}

.myList li a:before {
  counter-increment: myList;
  content: "(" counter(myList) ") ";
}
.myList li{
  list-style:none;
}
.myList li a{
  color: #000;
  text-decoration:none;
}

<ol class="myList">
  <li><a href="http://www.mysite.domain/page#MyID">A</a></li>
  <li><a href="http://www.mysite.domain/page#MyID">B</a></li>
  <li><a href="http://www.mysite.domain/page#MyID">C</a></li>
  <li><a href="http://www.mysite.domain/page#MyID">D</a></li>
</ol>

Answered By - krishna