🐞Links can't be styled

[Graywaren]

Check for existing bug reports before submitting.

• I searched for existing Bug Reports and found no similar reports.

Expected Behavior

I would expect that following the documentation of how to style links would result in the link displaying the style.

Current behaviour

The markdown attributes do not apply and hide at all and no styles are applied in either editing/live preview or reading views.

The only method I've been able to get the markdown attributes to apply to anything related to a link is following the method here of [[Link|Alias{.class}]] or [Link{.class}](url), which applies the style, but only to the alias itself/plain text before it's a link and therefore it only shows as styled when your cursor is directly after the link and that little bit of text is visible. The method of [[link{.class}]] mentioned on the same page just breaks the links entirely

For the method of [[Link|Alias{.class}]] the css code of .class a { [styling here] } will apply. I'm a bit uncertain if it is working as intended or not, since I didn't originally think to try .class a rather than just .class because I thought it was being applied to the a element itself. It means that I need to add additional code if I have a pre-existing class I use with say, bold text. Since the class is applying to the span containing the link element it makes sense, but it's likely at least worth noting in documentation. Also, you must include an alias in this. If you try to use [[Link|{.class}]], the link becomes invisible because the markdown attribute is being used as the alias and then is immediately hidden.

However, that same css code does not work for [Link{.class}](url) links. From inspecting the CSS, this appears related to the issue I posted about here, where the parent element's style is overriding the element where the class is actually applied. I had to use this code to get the link color to change for these links:
.cm-link:has(.class) a { --link-external-color: aqua;}

Also, none of that worked in reading view, so I had to add the following to get the color to apply in reading view

a.internal-link.class.is-unresolved { color: blue; } /* for unvisited links */
a.internal-link.class { color: blue; } /* for visited links */

I haven't figured out a way for the code in the second part to get it to work in reading view to accept my usual method of coding styles. I use [class^="ma-"][class*="class"] so that I can have classes like .ma-blue-bold, since I haven't figured out how to add multiple separate classes with this plug-in. This means that I'll have to put the class in exactly for each compound class I use in a link. I'm hoping it's just a matter of I'm unaware of the proper css here, and with some googling I'll resolve that part of it, but figured I would mention it anyway.

Reproduction

Create a link, follow documentation or the linked thread of how to apply style.

Which Operating Systems are you using?

• Android
• iPhone/iPad
• Linux
• macOS
• Windows

Obsidian Version Check

1.67

Plugin Version

1.1.2

Confirmation

• I have disabled all other plugins and the issue still persists.

Possible solution

If nothing else, the documentation should be updated with instructions for the methods that it becomes possible to style the links.

[Graywaren]

Relatedly, another bug or poor interaction: internal links styled via [[Link|Alias{.class}] are not clickable to follow the link in editing mode, even holding control etc. It only reveals the full link code rather than following the link itself

In case anyone stumbles upon this thread looking for link styling, this is the code I use to color internal links styled in this method now. The [class*="your-class"] allows it to pick up any link where the class contains it, so you can combine multiple classes. For example, if you write the below for each separate thing you might want to style a link with, such as a color, bold, italic, you can then combine that to: [[Link|Alias{.purple-bold-italic}] and it'll apply all three.

[class*="your class"] a /* editing/live preview */
[class*="your class"] a:hover /* editing/live preview hovered*/
.markdown-reading-view a[class*="your class"] /* reading view */ 
.markdown-reading-view a[class*="your class"]:hover /* reading view hovered */