Hide inline property names on inactive lines

[Ouroboros_Cantor]

What I’m trying to do

Properties can be added in the YAML frontmatter using

—
property1: value_of_property1
—

Additionally, properties can be added inline in the note itself, using
property2:: value_of_property2.

I would like to create a CSS snippet to hide the inline property names from my notes. For example, if my note contains the following inline property:
definition:: Some definition
I would like to hide the property name definition::, and only see the property value Some definition in preview mode.

Ideally, the property names would be hidden on inactive lines, and only display on active lines (on which my cursor is placed). An example of this is the following snippet to hide block IDs on inactive lines:

/* Hide block IDs on inactive lines */
.cm-blockid {
    opacity: 0;
}
/* Show block IDs on active lines */
.cm-active .cm-blockid {
    opacity: 1;
}

Things I have tried

I’ve looked on the internet and asked chatGPT, but did not find a satisfactory solution.

[govsat1]

I don’t believe “inline fields” are treated any differently than regular text. Inline fields are solely a dataview feature so css won’t help you here.

However, you can mark an inline dataview field as hidden with the (definition:: Words) format, and only “Words” will show.

[holroy]

@govsat1

Inline fields are solely a dataview feature so css won’t help you here.

Well, not sure who makes it happen, but you can indeed style inline fields using CSS. If you’re using the [ ... ] the syntax you can write CSS selectors to target the key and/or value for a given key name separately. If you use the ( ... ) by default the key is hidden, but currently it also means you need to target all of those values as a group.

I can hopefully write up some examples when I get to computer later on today.

[govsat1]

In the context of OPs question, using the format definition:: abc, I don’t see any way these could be targeted.

When using the [a:: b] or (a:: b) DV inline formats as I suggested, you can indeed target with the .dataview.inline-field-*** selectors.

[holroy]

Which markup has been introduced by dataview or not intrigued me a little bit, so I tried the following document in my test vault (with Dataview installed) and in the Sandbox vault with nothing installed:

---
tags:
  - f74691
myPropertyField: myPropertyValue
---
questionUrl:: http://forum.obsidian.md/t//74691

bodyInlineField:: body inline value

Another paragraph with a [squaredField:: squaredValue] and a (roundField:: roundValue).

`$= dv.span(dv.current())`

The following screenshots with explanations and CSS selectors are from reading mode.

DOM view from my test vault

Here we can see that the myPropertyField and the squaredField are targetable by CSS using selectors such as:

• div[data-property-key="myPropertyField"]
• div[data-dv-key="squaredField"] or .inline-field-key[data-dv-key="squaredField"]

But the bodyInlineField is not selectable at all, and the roundField is only selectable by the group selector of .inline-field-value.

We can further also target the actual value cells using something like:

• div[data-property-key="myPropertyField"] .metadata-property-value
• .inline-field-key[data-dv-key="squaredField"] + .inline-field-value

DOM view from Sandbox vault

Here we can see that the property fields are just the same, as expected, but none of the dataview enabled selectors are available, so neither bodyInlineField, squaredField or roundField are selectable by CSS.

---

In short, all of the fields defined above are available through dataview, but only the myPropertyField (and its value) and squaredField (and its value) is fully available for styling through CSS.

So the way to hide the key from something like [definition:: Some definition] in reading mode would be to use:

/* Hide (or format) the key element */
.inline-field-key[data-dv-key="definition"] {
  display: none;
}

/* To apply formatting for the key value */
.inline-field-key[data-dv-key="definition"] + .inline-field-value {
  background-color: inherit;
}

Sadly though, this only applies to reading mode, as live preview only allows for styling of the myPropertyField as can be seen in the image below.

DOM view in live preview