Hello everyone!

I'm trying to customize the appearance of a "Tabs" block on my website. Currently, the buttons in this block have a default black background, which matches my overall theme. However, I want to change this for the block alone.

I would like to implement an underlined highlight effect similar to the standard one in Odoo. Does anyone know which CSS class I should target for this effect? Also, I need this highlight to remain active when I'm in the corresponding section.

Essentially, I'm aiming to achieve the same look as the black rectangle (the button) but with an underlined highlight.

Here's the CSS code I've started with, but I need help identifying the right class and exploring if there's another approach to achieve this effect:

.tab-button::after {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width 0.5s ease, background-color 0.5s ease;
}
.tab-button:hover::after, .tab-button.active::after {
    width: 100%;
    background-color: #yourHighlightColor;
}

Thank you all in advance for your response! 

Nicolas