An underline tabs component built with pure HTML and CSS that highlights the active tab using a sliding or animated underline indicator. It enhances navigation clarity and state visibility without relying on JavaScript.
Usage
Use this component when interfaces require minimal yet clear tab emphasis, such as documentation sections, dashboard panels, feature breakdowns, or content navigation layouts.
Implementation
The underline animation is achieved using CSS pseudo elements and transform based transitions, allowing the indicator to move smoothly between tabs. Responsive styling ensures proper alignment across screen sizes.
HTML
<div class="ss-tabs underline preview">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">Overview</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">Details</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">Reviews</label>
</div>CSS
.ss-tabs.preview{
display:flex;
gap:14px;
font-size:13px;
position:relative;
}
.ss-tabs.preview input{
display:none;
}
.ss-tabs.preview label{
padding:6px 8px;
cursor:pointer;
position:relative;
color:var(--tab-text);
transition:color .2s ease;
}
.ss-tabs.preview label::after{
content:'';
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:var(--tab-accent);
border-radius:2px;
transition:width .25s ease;
}
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label{
color:var(--tab-active-text);
}
#tab1:checked + label::after,
#tab2:checked + label::after,
#tab3:checked + label::after{
width:100%;
}
:root{
--tab-text:#BC6FF1;
--tab-active-text:#BC6FF1;
--tab-accent:#BC6FF1;
}
@media (prefers-color-scheme: dark){
:root{
--tab-text:#BC6FF1;
--tab-active-text:#BC6FF1;
--tab-accent:#BC6FF1;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated underline indicators
- Enhances tab state visibility
- Fully responsive across breakpoints
- Suitable for dashboards and content layouts
- Easy to customize underline thickness and color
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.