I have trick draw line with text

Look at screenshot the red Circle line just draw a line with text Here sometimes UX design UI just like that. how to achieve the effect?

This is simpley requirement just need CSS Pseudo-class full code

@mixin line-with-text($text) {
  text-align: center;
  position: relative;
  border-bottom: 1px solid #ccc;
  margin: 100px 0;
  &::before {
    position: absolute;
    top: 100%;
    left: 50%;
    content: $text;
    color: pink;
    display: inline-block;
    background: white;
    transform: translate(-50%, -50%);
    padding: 0 10px;
  }
}
.line {
  @include line-with-text("Here");
}

You can copy the Snippet to you project and replace the argument Here all is done. also you can custom all the mixin attributes.

Here is line-with-text online dem, Hope it can help you :)