Не понимаю, как сделать рамки для текста в CSS

Question

Только начал изучать css и html и в качестве обучения вёрстке нашёл макет сайта и увидел такой дизайн и не знаю как его сделать (возможно слишком глупая проблема, но всё же)

Answer 1

ссылку в див можно, а можно поиграть с css и ее саму центрировать

.myDiv {
  text-align: center;
  font-family: sans-serif;
}

hr {
  width: 100px;
}

a {
  text-decoration: none;
  color: black;
}

<hr />
<div class="myDiv"><a href="https://ru.stackoverflow.com/help/how-to-ask">MAIN</a></div>
<hr />

ну или просто hr

hr {
  width: 100px;
}

.myDiv {
  text-align: center;
  font-family: sans-serif;
}

<hr />
<div class=myDiv>MAIN</div>
<hr />

украду идею Див с верхним и нижним бордером – SwaD

в примере, что вы указали текст, обведен двумя чертами, возможно как сказал SwaD обвести div-ами подойдет ?

.myDiv {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  display: inline-block;
  text-align: center;
  font-family: sans-serif;
}

<div class=myDiv>MAIN</div>

Answer 2

Вот примерно 1 в 1

.myDiv {
  width: fit-content;
  font-family: Arial;
  font-size: 26px;
  line-height: 38px;
  border: 2px solid black;
  padding: 0 16px;
  border-left: none;
  border-right: none; 
}

<div class=myDiv>MAIN</div>

Устанавливаем блоку с текстом границы (border) сверху и снизу. Чтобы размер полос был больше текста, делаем padding слева и справа, а высоту регулируем с помощью line-height, который устанавливает размер который занимает текст, сам же размер шрифта задается с помощью font-size.

Answer 3

#x {
  height: 1em;
  border-left: none;
  border-right: none;
  display: list-item;
  list-style: 'а я сопру идею с ' inside;
}

#x:before {
  content: '"ну или просто <hr>"';
  font-style: italic;
}
#x:after {
  content: ' просто потому что могу :3';
}

<hr id='x'>

БЛОГ НА HUSL

Не понимаю, как сделать рамки для текста в CSS

Ответы (3 шт):