I have been working on creating a tab-like feature using CSS for my project.
Currently, when a tab is active, I adjust the CSS of the selected tab using the tab-slider--tabs:after selector. However, I encountered an issue where one of the tab header texts is longer than the others, resulting in a layout problem like this:
https://i.sstatic.net/CiowW.png
I am trying to figure out how to dynamically set the width so that it appears like this:
https://i.sstatic.net/v49cv.png
.tab-slider--tabs {
display: block;
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
border-radius: 35px;
overflow: hidden;
background: #fff;
height: 35px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tab-slider--tabs:after {
content: "";
width: 50%;
background: #345F90;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 250ms ease-in-out;
border-radius: 35px;
}
.tab-slider--tabs.slide:after {
left: 50%;
}
Check out the: Demo Code
Update: For now, I managed to temporarily solve this issue by using .tab-slider--trigger{ width:30%; display: table-cell; ...}, but I am still seeking a better solution.