Topic: Simple toc CSS

Valerrr
January 12, 2026 at 4:14 am

Hello, I want to replace Kadence’s Table of Contents with Simple TOC.

I have already managed to customize the appearance using GenerateBlocks Selectors.

All that’s left is to customize the arrow, as shown in the image. However, this will probably require custom CSS. It is most likely a system arrow that automatically appears with the <summary> tag.

IMAGE: https://imgur.com/a/ubeNiUX

I need to:
1. Remove the arrow
2. Use CSS to create a new one so that it appears on the right side, as in Kadence TOC

I understand that this is probably beyond the scope of this support. But maybe you can advise me on the right CSS.:)

Thank you

Ying

January 12, 2026 at 9:02 am

Hi there,

Try this CSS:

/* Chrome, Edge, Safari */
details > summary::-webkit-details-marker {
  display: none;
}

/* Firefox */
details > summary {
  list-style: none;
  position: relative;
}

/* Modern browsers (spec-compliant) */
details > summary::marker {
  content: "";
}

details > summary:before, details > summary:after {
  content: "";
  background-color: currentColor;
  height: 2px;
  position: absolute;
  top: 11px;
  transition: all ease-in-out 0.1333333333s;
  width: 12px;
}
 details > summary:after{
transform: rotate(-45deg);
    right: 2px;
    transform-origin: 50%;
 }
 details > summary:before{transform: rotate(45deg);right: 10px;transform-origin: 50%;}

details[open] > summary:after {
    transform: rotate(-45deg);
}

details[open] > summary:before {
    transform: rotate(-45deg);
}

details[open] > summary:after {
    transform: rotate(45deg);
}

Valerrr

January 12, 2026 at 12:32 pm

Thank you very much. It works well, but I tweaked it a little and came up with this CSS. What do you think? Can it be used, or is there something wrong with it?

.toc-wrapper details > summary {
  list-style: none;
  position: relative;
  cursor: pointer;
  padding-right: 2rem;
  font-weight: bold;
  user-select: none;
}
/* Skrytí markerů */
.toc-wrapper details > summary::-webkit-details-marker { display: none; }
.toc-wrapper details > summary::marker { content: ""; }

/* Plus symbol */
.toc-wrapper details > summary:before {
  content: "+";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em; /* Větší pro lepší viditelnost */
  font-weight: bold;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toc-wrapper details[open] > summary:before {
  transform: translateY(-50%) rotate(45deg);
}

Ying
January 12, 2026 at 12:39 pm

Looks good 🙂
Valerrr
January 12, 2026 at 12:41 pm

Last question 🙂 Should I put the CSS in the template or rather in the elements and only insert it into posts where the TOC will actually be?

Thank you
Ying
January 12, 2026 at 12:49 pm

I would add it to cstomizer > addtional CSS, so it can be loaded before HTML gets loaded to avoide layout shift issue.
Valerrr
January 12, 2026 at 1:59 pm

Unfortunately, I have now discovered that the problem with {{post_permalink}} is caused by the SimpleTOC

https://generate.support/topic/carousel-query-problem/page/2/#post-188457

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Simple toc CSS