Question: I don't know how to describe them, so here is a screenshot
[![enter image description here](https://i.stack.imgur.com/BZKHP.png)](https://i.stack.imgur.com/BZKHP.png)

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

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

```css
div:before {
  content: "― ";
}

div:after {
  content: " ―";
}
```

```html
<div>TEST</div>
```
Here it is the code

```css
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;
}
```

```html
<div>
  <p>Hello</p>
  <hr>
</div>
```