target-counter not working for css print toc page

Question

I have a web page which I am converting to a PDF, nearly everything is working as I want however for some reason the below:

@media print {
    ul.md-nav__list a::after {
        content: leader('.') target-counter(attr(href), page);
    }
}

Does not create the expected dotted line followed by page number for the given document href.

I don't think its an issue with the layout of the page because if i do

@media print {
    ul.md-nav__list a::after {
        content: "......";
    }
}

The dots are added to the end of each link. Neither leader or target-counter seem to work on their own either.

The list looks like:

<ul class="md-nav__list">
    <li class="md-nav__item">
        <a class="md-nav__link" href="#system-availability" title="System Availability">System Availability</a>
    </li>
    <li class="md-nav__item">
        <a class="md-nav__link" href="#receipt-of-message-retries" title="Receipt of Message Retries">Receipt of Message Retries</a>
    </li>
    <li class="md-nav__item">
        <a class="md-nav__link" href="#sending-of-message-retries" title="Sending of Message Retries">Sending of Message Retries</a>
    </li>
</ul>

Any ideas as to why this might be the case?