как сделать линию которая будет ровно по середение текста но не на тексте а возле(как на примере)

Question

Пробовал через разные способы, но не получается довести до автомотизма, как сделать так чт о бы у меня был класс "paragraph" который при создании генерировал бы линию которая появляется справа от текста на отсутупе например 10px и ровно по центру текста

Answer 1

Можно сделать вот так:

.psection {
  display: flex;
  width: 100%;
  font-weight: 1000;
}

.psection #text {
  margin-right: 10px;
  white-space: nowrap;
}

.psection #line {
  width: 100%;
}

.psection #line hr {
  height: 2px;
  border: none;
  background-color: black;
}

<div class='psection'>
   <div id='text'>Какой то текст</div>
   <div id='line'><hr /></div>
</div>

Answer 2

как сделать так что бы у меня был класс "paragraph" который при создании генерировал бы линию которая появляется справа от текста на отсутупе например 10px и ровно по центру текста

.paragraph{
display: block grid;
grid-template: 1fr / auto 1fr;
width: 100%;
}
.paragraph:after{
content:'';
border: 2px solid red;
margin: .5em 0 .5em 10px;
}

<p class='paragraph'>пыщ пыщ! галактеко апаснасте!!1</p>
<div class='paragraph'>aaaaaaaaaaaaaaacc</div>

Answer 3

.line::after{
  position: absolute;
  content: '';
  width: 200px;
  height: 5px;
  top: 37px;
  margin-left:10px;
  background: #2b2b2b;
}

<h1 class='line'>000000000</h1>

БЛОГ НА HUSL

как сделать линию которая будет ровно по середение текста но не на тексте а возле(как на примере)

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