Change or hide part of tags with CSS

❓Help
#1

Is there anyway to use wildcards in CSS to only manipulate parts of a tag?

I format my Tags extensively to make the autocomplete more helpful, but the readability suffers as a result.

For instance:

##|Reply
##|Draft
##|Build

@@(City)Hamburg
@@(City)Oslo

Used in a task: “##|Build house in @@(City)Hamburg”

Should ideally become:

Reply
Draft
Build

Hamburg
Oslo

Used in a task: “Build house in Hamburg”

I know how to do it on a per tag basis, but that is a bit too manual for my taste. I want to target “##|” and “@@(City)” This way I can add tags without doing any more CSS customisation.

Hidden Tags
#2

You can target all tags beginning with a string easily:

a[title^=“Filter @@(”]

Should match all your location tags.

As for removing parts of the text, you can‘t do that with CSS directly. But you might be able to use something like text-indent:-30px with overflow:hidden to obscure the beginning of the tag text. I haven‘t tried that, though. I‘d be happy to experiment a bit further if you like.

1 Like
#3

Thanks for the suggestion. That could work I think. But when I wrote

a[title=“Filter @@(”] {
text-indent:-30px
overflow:hidden
}

Nothing seems to change.

#4

It was just a guess, I wasn’t sure if that alone would work. Two (perhaps three) things:

There CSS selector must contain ^= to work.

The quote marks around the Filter are not the right kind, but that might have happened when you copied the code into the forum

display:inline-block was missing.

This here works for me, somewhat:

a[title^="Filter @@("] {
    text-indent: -35px;
    overflow: hidden;
    display: inline-block;
}

This hides the front part of the tag. You’ll have to adapt the -35px depending on your font and screen size.

Screenshot (middle line is in editing mode):

Screenshot 2020-06-16 at 16.49.51

I don’t have any idea how to hide the closing bracket at the end, though.

#5

Oh thank you! This seems to be almost exactly what I was looking for.

1 Like
#6

Seems there are two different css classes for tags in the node and tags in the notes field. Making this CSS behave a little wonky.

Any tips on how to circumvent this?

#7

Do you have an example?