0

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? I want to replace this line with something else
  2. I want to highlight the label by adding shadow around it. Is that possible? enter image description here

Thanks in advance,for the help.

user18067747
  • 19
  • 1
  • 6

1 Answers1

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;}
Taras
  • 1,017
  • 2
  • 13