Сложный декоративный заголовок с двумя отдельными границами

#html #css #html5 #css3 #адаптивная_верстка

Какое решение Вы можете предложить для создания такого заголовка?



Как видите, левая полоска не явлется border-left, т. к. её длина (вернее, высота)
не равна истинной высоте блока.

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

Ответы

Ответ 1

В таких случаях традиционно пользуются псевдо-элементами ::before и ::after, потому
что они позволяют экономить на мусоре в разметке.

Собственно, одну полоску рисуем бордером, другую — псевдо-элементом. По-моему, выбор
произвольный. Я не заметил, чтобы это вызывало какие-то проблемы на узких экранах.
(Или я неправильно понял ваше задание — у вас многострочный пример отсутствует.)



h1 {
  position: relative;
  padding: 3px 5px;
  border-left: 3px #666 solid;
}
h1::after {
  content: " ";
  display: block; position: absolute;
  left: -3px; right: 0; bottom: -5px; height: 2px;
  background: #888;
}

  
Hello world!


  
Hello world!