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 :)
Top comments (0)