Как с помощтю html & css сделать черточки побокам от текса?

Question

[Паша]

Пока что придумал так это с помощью hr , но это же прошлый век?

И чтобы не создавать новую тему, помогите, пожалуйста, с такой штучкой - ромбик на бордере

Answer 1

[pegas]

Возможно это просто фоновая картинка либо такой символ например вставьте код: — перед текстом. htmlweb.ru/html/symbols.php

Comments

[Паша]

Спасибо, то что нужно!

[pegas]

Вот ромбик) : div{
width: 50px;
height: 50px;
background: black;
transform: rotate(50deg);
}

Answer 2

[Flur]

Задать тексту (лучше сделать заголовок, а не текст) стиль, скажем :

<!--> ...some code ... <-->

<h2 class="with-line">Заголовок к которому добавляем черточки</h2>

и дальше в стилях добавить к заголовку данного стиля псевдоэлемент " — " до- и -после :

.with-line:before {
    content="—";
    font-size: 1.2 e.m;
}

.with-line:after {
    content="—";
    font-size: 1.2 e.m;
}

Comments

[pegas]

С псевдо-элементами лучше всего.

Answer 3

[Jsus Phptos]

display:inline-block или flex

на flex
https://jsfiddle.net/hon96v8a/1/

Comments

[Паша]

hr + flex?

[Паша]

тоесть без hr не обойтись?

[pegas]

Ой как сложноо) зачем так усложнять? если уж на то пошло можно c псевдо-элементами before и after чёрточку сделать.

[Jsus Phptos]

1PeGaS: все просто я сделал это меньше чем за 30 секунд...

[pegas]

Jsus Phptos: Даже не во времени дело, а в загруженности файла, и множеством строк кода что приводит к трудно читаемости.

[Jsus Phptos]

1PeGaS: это инструменты ктогда их используешь в какой то большой системе они не кажутся такими громоздкими

[pegas]

Jsus Phptos: Всегда если есть возможность оптимизировать код, лучше это сделать. Даже банально сокращать margin: 2px 5px 7px 6px; вместо того чтобы писать 4 строки.