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:
[example](https://example.com/foo/bar)
In Reading View I could write a CSS selector like this:
a[href^="https://example.com"] {
/*...*/
}
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 span.cm-link element would be great.
<span class="cm-link" data-href="https://example.com/foo/bar"><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.