How to make such lines near text using CSS?-CodePudding

I don't know how to describe them, so here is a screenshot

CodePudding user response：

Here it is the code

p {
    background-color: #ffffff;
    position: relative;
    z-index: 1;
    width: max-content;
    margin: auto;
    padding: 0px 5px;
}
hr {
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    top: 9px;
}
div {
postition: relative;
}

<div>
  <p>Hello</p>
  <hr>
</div>

CodePudding user response：

This is one method using css pseudo elements :before and :after.

I used the Horizontal bar Unicode character ― in the css content: declaration.

div:before {
  content: "― ";
}

div:after {
  content: " ―";
}

<div>TEST</div>

CodePudding user response：

This is very poor desigend question.

I think you want to center your text.

So here is your solution.

 .my-text {
  text-align: center;
 }