Simple divider with use of tags and CSS (+ a question)

🌈Share & Showcase
#1

Sometimes you need to divide some topics.

Divider

There’s a very simple solution:

  1. Make a tag which you will use for the dividers. I use “#-”

  2. Use this piece of CSS (you can substitute divider icon with any other of your liking)

    a[title^=“Filter #-”] {
    float: left;
    font-size: 0;
    display: inline-block;
    margin-right: 10px;
    white-space: nowrap;
    text-decoration: none;
    background: none !important;
    }

    a[title^=“Filter #-”]:before {
    font-size: 16px;
    }

    a[title^=“Filter #-”]:before { content: “:wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash::wavy_dash:”; }

    a[title^=“Filter #-”]:before {
    font-size: 16px;
    }

Also, I have a question: does anyone know how to hide the bullet if there is some specific tag. It would allow the divider to be more accurate.

2 Likes
#2

does anyone know how to hide the bullet if there is some specific tag.

No. Not a tag. It would have to be something that changed the class of the node itself. Like making it a heading, or color. Then you could hide all nodes with that class.

#3

Thanks for the answer. Now I get why all my attempts didn’t work out. If that so, I have to sacrifice one color or one heading level for that :frowning: