Короткая горизонтальная линия перед текстом
Я подготовил много постов о создании горизонтальной линии до и после заголовка, но все примеры не совсем то, что я хочу иметь, и я не могу изменить их на то, что я хотел бы иметь.
В основном мне нужна КОРОТКАЯ (25 пикселей) горизонтальная линия перед заголовком.
Может с css не получается... как лучше тогда сделать?
Любая помощь приветствуется.
заранее спасибо
Ответы 1
Вы можете легко сделать это с помощью CSS, создав псевдоэлемент.
Я использовал vertical-align: middle здесь, а затем некоторое относительное позиционирование с небольшим количеством отрицательного top, чтобы заставить его двигаться вверх - по моему опыту, это обычно дает немного лучший контроль над позицией, чем использование vertical-align: text-top o.ä. самостоятельно.
h1::before {
content: "";
display: inline-block;
position: relative;
top: -.35em;
margin-right: .25em;
width: 25px;
height: 2px;
background: #ccc;
vertical-align: middle;
}<h1>Foobar</h1>но он вверху, как сделать его посередине?
Как я объяснил, я использовал относительное позиционирование и top, чтобы получить его там (из вашей картинки не было ясно, где именно вы хотели его) — так что удалите это, если вы хотите, чтобы он был там, где vertical-align: middle сам по себе поместит его.
добавьте сюда код HTML и CSS