Include link URL in Live Preview to enable CSS customizations

Use case or problem

I would like to write custom CSS that matches on the URL of a link.

For example, suppose I added this link to a note:


In Reading View I could write a CSS selector like this:

a[href^=""] {

There is currently no equivalent to this in Live Preview. The markup that is rendered looks like this:

<span class="cm-link"><span class="cm-underline" draggable="true">example</span></span>

Note that the URL is not present in the DOM at all, as far as I can tell.

Proposed solution

Add the URL to the DOM such that a CSS selector for it is possible. For example, adding an attribute like data-href to the element would be great.

<span class="cm-link" data-href=""><span class="cm-underline" draggable="true">example</span></span>

Current workaround (optional)

None, this is not possible as far as I can tell by only writing some custom CSS.

Related feature requests (optional)

I think this is similar to HTML that better preserves markdown semantics for easier CSS, except more focused on a very specific use case.