Styling internal links with css

[Expeditioner]

Things I have tried

I have tried to style internal links with the Supercharged Links plugin. But, 1) I have not been able to get the desired result 2) the style of links do not reflect in the editor mode.

I have also tried

.cm-s-obsidian span.cm-hmd-internal-link[href*=“QUE”] {
color : salmon;
}

a.internal-link[href*=“QUE”] {
color: #e299d0;
}

What I’m trying to do

I am trying to implement the following Roam CSS style in Obsidian

span[data-link-title^="[[QUE]] - "]:before {
content: ' ’
}

span[data-link-title=“QUE”] > span {
/*color: #fff !important; */
font-weight: 500;
color: #99890E !important;
}

span[data-link-title^="[[QUE]] - "] > span {
/*color: #fff !important; */
font-weight: 500;
color: #99890E !important;
}

Can someone help with the Obsidian CSS equivalent of the above ?

[Expeditioner]

This has been the most promising solution thus far. It works with the Supercharged Links plugin, with the view in editor enabled.

Difficulty with Obsidian CSS vs Roam CSS

You could try this: .cm-hmd-internal-link[data-link-data-href*="QUE"], .markdown-preview-view a[href*="QUE"] { color: teal !important; } .cm-hmd-internal-link[data-link-data-href*="QUE"]::before, .markdown-preview-view a[href*="QUE"]::before { content: " "; } Downside is it cannot style uncreated note links in edit mode

[mdroid]

Would it be possible to add some tags to the files in your workflow to help achieve the CSS result you are looking for?

If so, maybe this from @adamimos might help

Results

CSS

[data-link-note_type$="daily" i]::before{
    content: "☀ "
}




[data-link-note_type$="source" i]::before{
    content: "📚 "
}

[data-link-note_type$="source" ]{
    background-color: #9E9E9E56 !important;
    color: white !important;
    border-radius: 18px;
    padding: 5px 15px;
}



[data-link-note_type$="evidence" i]::before{
    content: "🌱 "
}



[data-link-note_type$="evidence" ]{
    color: #DB134A !important;
    border-radius: 18px;
    padding: 5px 15px;
}

[data-link-note_type$="question" i]::before{
    content: "🔎 "
}


[data-link-note_type$="question" ]{
    color: #a89732 !important;
    border-radius: 18px;
    padding: 5px 15px;
}


[data-link-note_type$="claim" i]::before{
    content: "⚡ "
}


[data-link-note_type$="claim" ]{
    color: green !important;
    border-radius: 18px;
    padding: 5px 15px;
}



[data-link-note_type$="topic" ]{
    color: #00BCD4 !important;
    border-radius: 18px;
    padding: 5px 15px;
}

[data-link-note_type$="rat" i]::before{
    content: "🐭 "
}

Breadcrumb Settings

Supercharged Links

[Expeditioner]

Thanks for your reply. I will try this out.

I was thinking about using Yaml metadata and dataview style inline meta data to achieve a sort of query drawer as in Discourse Graph.

With that I could query for Evidence where Evidence supports/ informs Claim in the Question.

I looked closer into the Discourse Graph and there is a lot more going on. You can set mutliple grammar relations so that Roam itself can figure out which evidence goes with which claim.

I hope the above makes sense. The main thing is that the Graph is doing a part of the thinking for you there.