Как сверстать такую конструкцию?

Question

[Bart Simpson]

Подскажите, как грамотно сверстать эти три элемента чтоб без костылей ?
У меня есть три элемента : линия 800 пикселей(PNG), иконка дерева(PNG) и текст.
Я так понимаю текст нужно сделать через бифор..

Comments

[Сергей Сергей]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Ankhena]

Вам там в ответах понаписали идей с кучей оберток.

Но это один тег. Вероятнее всего, заголовок.
Листья слева скорее всего не от заголовка, а от блока или всей страницы. Но вы так обрезали скрин, что этого не понять.
Если вдруг эти листья вместе с заголовком, то они делаются тоже фоном и/или псевдоэлементом (сделаете по аналогии с деревом).
Полоса и дерево - это псевдоэлемент с нижним бордером и фоном.

Примерно так:

Я так понимаю текст нужно сделать через бифор..

Вы хотите засунуть самое важное содержимое в псевдоэлемент и лишить страницу части осмысленного контента.

[Bart Simpson]

Ankhena, листья там картинка с позицией абсолют, хотел максимально обрезать чтоб не было видно..

[Bart Simpson]

Ankhena, спасибо за ответ. Вижу что Вы гуру верстки)

Answer 1

[Антон Антон]

как-то так: https://jsfiddle.net/upcsrqxe/1/

Comments

[Ankhena]

Стилизация по id, три тега вместо одного... хоть плачь

[Антон Антон]

Ankhena, для шапки по id норм. да и вообще это синтетический пример.
а количество тегов ничто по сравнению с тем, что все сразу понимают, как это работает.

Да и это явно лучше, чем осмысленный текст пихать content в :before.

[Ankhena]

Антон Антон,

а количество тегов ничто по сравнению с тем, что все сразу понимают, как это работает.

Ну да, особенно хорошо тем, кто пользуется читалками.
Так что тогда уж лучше с семантикой, aria, role и т.д.
Потому что код из примеров новички очень часто воспринимают как руководство к действию и начинают тыкать в код картинки-украшения без aria-hidden или role presentation.

Да и вряд ли кто-то (кому это в принципе нужно) не понимает как работает фон у заголовков и псевдо.

для шапки по id норм.

Нет данных о том, что это шапка и нет гарантии, что этот элемент не переиспользуется.

Да и это явно лучше, чем осмысленный текст пихать content в :before.

Это точно.

[Антон Антон]

Ну да, особенно хорошо тем, кто пользуется читалками.

Ankhena, читалки проигнорят "пустые" теги. Да и вообще внешний тег там только ради бэкграунда слева - если делать отступы через margin, то его так не разместить, а если через padding - то не факт, что на базовой линии получится второй блок сделать, хоть он через :after, хоть прямо выделен.

Нет данных о том, что это шапка и нет гарантии, что этот элемент не переиспользуется

очень похоже на шапку. да и если переиспользуется (например разделитель блоков) - пофиг, все давно все в компоненты пихают, а там и изоляция стилей и вот это всё

[Bart Simpson]

Ankhena, могли бы чуть более подробно объяснить зачем нужны aria-hidden и role presentation? Спасибо

[Ankhena]

Ivan Lunin, ага
1. https://developer.mozilla.org/en-US/docs/Web/Acces...
2. https://developer.mozilla.org/en-US/docs/Web/Acces...
и далее

Answer 2

[Steppp]

Я бы сделал блок(див), высотой 100рх, шириной 1000рх. и в него span (h3/ ul>li>h3)

div.block
span.text

У текста (span) padding 60px 0 0 30px
дерево я бы на псевдо эл к диву, так же и линию к диву только адаптации не будет

С адаптацией я бы нарисовал спану псевдо эл линии, и кустик к диву) right: 0;
И вообще это не спан, а заголовок, либо же пункт меню