How to make such lines near text using CSS?

Issue

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

Solution

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>

Answered By - Rob Moll