Как окутать заголовок в квадратные скобки в html?

Мне нужно что бы был как бы заголовок и что бы с двух сторон его не полностью окутывали скобки, как такие [ только более вытянутые вправо палочки сверху и снизу, пока что есть только мысль что надо делать это с помощью before и after, но точно как осуществить не знаю, буду рад любой помощи!

Да, тут действительно если я правильно вас понял следует использовать ::before и ::after, вот вариант реализации:

<h1 class="brackets">Hello

Наш заголовок с классом перед которым и после которого будут добавлены скобки.

.brackets {
text-align:center;
}
.
brackets::before,
.brackets::after {
width: 30px;
height: 40px;
top: 10px;
border: 2px solid #000;
content: '';
position: relative;
display:inline-block;
}
.
brackets::before {
left: -10px;
border-right: none;
}
.
brackets::after {
right: -10px;
border-left: none;
}

В этом варианте мы создаем до и после блока с заголовком по блоку с рамками со всех сторон затем, с помощью всё тех же before и after для добавленного перед заголовком блока мы удаляем правую рамку, а для добавленного после блока мы убираем левую рамку, таким образом можно создать такие скобки, так же длину верхней и нижней линии такой скобки можно регулировать изменяя ширину во втором блоке css.