How can i create below like post in generatepress

Hi there,

you can add an underline to each of your headings using CSS:

h1, .entry-content h2 {
    border-bottom: 2px solid #000;
}

That Table of Contents looks very simple and could be manually created in the editor using Blocks. I would suggest using GenerateBlocks:

https://generateblocks.com

You can use a Container Block the Background color and round corners, and within a GB Headline Block for adding the links.

Listen i want to manually create table of content ,
i have 2 query
first- below is my HTML code and CSS code. i want to give anchor link to cofee/tea/milk but when i fetch html from guttenberg i am not able to give anchor link to my content of table.
2nd: i want round rectangle corner shady background like above link in post
here is link of my code https://codepen.io/minoshw-the-pen/pen/PoJRxpB , help me to put shady round rectangle background and anchor link in it.
HTML CODE

1. Coffee
2. Tea
3. Milk

here is CSS CODE
ol li::before {
top: 1em;
display: inline-block;
width: 20px;
height: 20px;
margin-top: -10px;
margin-right: 10px;
font-size: 16px;
line-height: 20px;
color: #fff;
background-color: #28BEFF;
border-radius: 100%;
content: counter(li);
counter-increment: li;
text-align: center;
}
ol {
counter-reset: li;
}
ol li {
position: relative;
padding: 0 0 10px 10px;
line-height: 1.6;
list-style: none;
}

Hi there,

Your question is not theme related, it's a general HTML and CSS question.

We are happy to point you to the right direction, but we can't help with too much customization on this, thanks for your understanding!

To add link to li element, try change your HTML to this:

<ol>
  <li><a href="#">Coffee</a></li>
  <li><a href="#">Tea</a></li>
  <li><a href="#">Milk</a></li>
</ol>

Change the # to the related HTML anchor :)