I have trick draw line with text

#css #trick

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");
}