[Resolved] manual TOC on left side bar css help.

[SUNBIN]

I want TOC on left side bar so i read some article and made it like this.

There are 3 classes (table-of-contents, toc-heading, toc-contents)
Because i made Heading and List into group.
So group is table-of-contents
Heading is toc-heading
List is toc-contents

But,
the style i want is like a table (see * on image)
how can i make it?

Here is my style
https://imgur.com/ATBUM71
Here is what i want
https://imgur.com/2rhdt6l

The css i used is (honestly i dont like this style)

.table-of-contents {
padding: 20px;
}

.toc-heading {
font-weight: 900;
font-size: 10px;
}

ul.toc-contents {
margin-top: 0em!important;
margin-left: 0em!important;
}

.toc-contents li {
list-style-type: none;
position: relative;
}

.toc-contents a {
font-size: 15px;
color: #000000;
text-decoration: none!important;
}

.toc-contents a:hover {
color: #585858;
border-bottom: 2px solid #585858;
}

.toc-contents li:before {
content: “➜➜”;
margin-right: 1em;
color: #585858;
left: -30px;
position: absolute;
}

[David]

Hi there,

can you share a link to a page on your site where i can see the TOC?

[SUNBIN]

Sure.
Check please

[David]

Try changing your CSS to this:

.table-of-contents {
    padding: 20px;
}

.toc-heading {
    font-weight: 900;
    font-size: 10px;
}

.table-of-contents ul.toc-contents {
    margin-top: 0em;
    margin-left: 0em;
    padding: 40px 0;
}
.toc-contents li:first-child {
    border-top: 1px solid;
    border-color: #4444;    
}
.toc-contents li {
    list-style-type: none;
    position: relative;
    border-bottom: 1px solid;
    border-color: #4444;
}

.toc-contents a {
    display: flex;
    font-size: 15px;
    color: #000000;
    text-decoration: none;
    padding: 10px;

}
.toc-contents li a:after {
    content: '➜➜';
    margin-right: 1em;
    color: #585858;
    margin-left: auto;
}
.toc-contents a:hover {
    color: #585858;
    background-color: #efefef;
}

[SUNBIN]

Thx david.
It works

[David]

Glad to hear that

[Author]

Posts