Add Triangle At Bottom Of Material Design Tab Mat-ink-bar

I want to change the style of the mat-ink-bar for Angular material tab. I wanted to archieve a design like this: Jsfiddle example The problem is that the mat-ink-bar already abso

Solution 1:

Update following css will resolve your issue.

.mat-tab-label {
  position: relative;
}
.mat-tab-header,
.mat-tab-label-container,
.mat-ripple {
  overflow: inherit !important;
}
.mat-ink-bar:after {
  content: "";
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: solid 20px#673ab7;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

Checkout stackblitz

Solution 2:

You are missing display:block for your ::after element. So block properties dont apply. Additionally you are stretching the width of the ::after to match its parent by using top, left, right and bottom.

Position either to top left or bottom right, not both`

Solution 3:

.c-tab.mat-ink-bar {
  position:relative
}

Try just this ^^...

Theoretically that is all you need: updatethttps://jsfiddle.net/Rakowu/e42wng0m/4/