How to make CSS change in Angular Material Stepper?

Question

I was working with Mat-Stepper on a project. This is the stackblitz link of the project. I wanted to make two changes here:-

1. How can I remove the horizontal line between the steps and replace it with something else, like an arrow or something?
2. I want to highlight the label by adding shadow around it. Is that possible?

Thanks in advance,for the help.

Answer 1

Add this to your styles and change background to any you like

.mat-stepper-horizontal-line{border-color: transparent; position: relative;}
.mat-stepper-horizontal-line:after{content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; background: red; margin: -10px 0 0 -10px;}

Boxshadow

.mat-horizontal-stepper-header-container{box-shadow: inset 0 0 0 1px red;}