DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
mixbo
mixbo

Posted on

I have trick draw line with text

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

Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠