Add a "+" sign to the primary tag to indicate additional sub-tags

Wellwisher

This is a pure CSS-only trick.

This tutorial helps you add a "+" sign to the primary tag to indicate additional sub-tags

Here's what you can achieve; the before and after:

You can target the specific list tag like so:

li.item-tag24>a:before { content: '+'; padding-right: 5px; }

Additional notes:
You can also add a background colour to the "+" sign and have it so that it looks like a circle (as shown below). This will help it stand out more. But I think the op looks just fine.

luceos

Wellwisher this should work on all tag children in one swoop:

li a.TagLinkButton.child:before {
    content: '+';
    padding-right: 5px;
}

Wellwisher

luceos

Unfortunately, it doesn't show the "Plus" sign on the main tag i.e like in my example I use flarum's "Support" section which contains the sub-boards:

When I add your css, all I see is the sub-tags getting a plus sign and not the main tag i.e in my example below "site announcements " has no plus icon:

My goal is to indicate to the user, that the main tag contains additional sub-tags.
Although your code is quite cool. I think it gives the tags more visual logic. 😃 So I will use that too.

luceos

Wellwisher hm that must be a difference in the meaning of sub tags then 😃

To me sub tags are all children to primary tags; so support has installation, upgrading and hosting here on discuss. In your example you are marking the next primary tag with a plus sign. Is that what you intended?

Wellwisher

luceos

Yep my apologies, I could have phrased it better in the topic title. I was trying to change the topic title to 😂 :

Add a "+" sign to the primary tag to indicate additional sub-tags

It would be cool if users here can change the title of their topics too or at least enable this for like 10mins. I am one of those people who ends up editing my posts several times xD

So I was not attempting to add the plus sign to the children. I was adding the plus sign to the parent. This would indicate to the visitors that there's children in the parent board.

Wellwisher

I am just revisiting this, but another easier way to do this is to add the "+" icon to the primary tag would be to add it inside the tag admin dashboard lol

But this means the "+" sign will also show up in the "tags page" which doesn't look too nice... but if you're conformable in implementing some css, use the CSS codes in the message below.

Wellwisher

This is the final result, all pure CSS:

I used a combination of Lucesos' and my CSS codes.

My CSS snippet adds the "+" icon to the primary tag (replace tag01, 02, 03 etc with your primary tag numbers ):

li.item-tag01>a:before, li.item-tag02>a:before, li.item-tag03>a:before{
content: '+';
padding-right: 5px;
}

luceos' CSS, this code adds the "right arrow" to child tags:

li a.TagLinkButton.child:before {
    content: '\21AA';
    padding-right: 5px;
    /* display: list-item; */
}

In my opinion this explains to the user better that there are additional items in the primary tag and that they can visit child items

Wellwisher

A little bit of a design tidy-up, still using the same CSS code from this post: Wellwisher.
As you can see, I have added the "+" symbol behind the grey circle, which looks in-keeping with the default style.

In the screen-shot, I have clicked on "Site Announcements" which shows the child tag "the curators".

codeX

Wellwisher

a different idea; font awesome 5

li.item-tag2>a:before, li.item-tag6>a:before{
font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	font-size: 13px;
	content: '\f055';
	margin-right: 8px;
	vertical-align: -1px;
}

Wellwisher

codeX Looks beautiful, very nice work. I also like the gradient background color 😃
I added the font-weight to my production site too 👍️