I'm trying to update the appearance of the mat-ink-bar in the Angular material tab.
My goal is to achieve a design similar to this: Jsfiddle example
The issue I'm facing is that the mat-ink-bar is already positioned as absolute, making it difficult to display my ::after element. Is there a solution to accomplish this?
Here is my attempt on stackblitz: Mat tab on stackblitz
My styles are written in the style.css file. The triangle at the bottom remains hidden even when using the dev tool. I've tried using z-index but without success. Any guidance would be greatly appreciated.
Here is the code snippet:
css
.c-tab .mat-ink-bar {
height: 5px;
}
.c-tab .mat-ink-bar::after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #3f51b5;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
html
<mat-tab-group class="c-tab">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
The desired outcome should resemble this: https://i.sstatic.net/8a2Xk.png