Как реализовать данный эффект без доп вложенности?

Question

тоесть чтобы не было данного элемента

<div class="sixteen columns">
  <div class="sub-text-line"></div>
</div>

а был только h1

h1 {
  text-align: center;
}

.sub-text-line {
  border-top: 1px dotted #414141;
  position: relative;
  width: 50px;
  margin: 0 auto;
  text-align: center;
}

.sub-text-line:after {
    content: '';
    left: 0;
    position: absolute;
    top: 4px;
    width: 100%;
    border-top: 1px dotted #e74c3c;
}

.sub-text-line:before {
    content: '';
    left: 0;
    position: absolute;
    bottom: 4px;
    width: 100%;
    border-top: 1px dotted #e74c3c;
}



* {
  box-sizing: border-box;
}
*:after, *:before {
  box-sizing: border-box;
}

<h1>Контакт</h1>
<div class="sixteen columns">
  <div class="sub-text-line"></div>
</div>

Answer 1

Можно ещё сделать в таком виде через SVG. Вариант, не pixel perfect, конечно, но концепцию отражает. Если Вам нужны цветные точки, то подставляете соответствующую SVG с точками (3 в ряд вертикально, только 3 точки без повторений).

h1 {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1:after {
  background-image: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='22.5' cy='22.5' r='13.5' fill='black'/%3E%3C/svg%3E");
  background-size: 4px;
  width: 100px;
  height: 12px;
  content: '';
  display: block;
  margin-top: 10px;
}

* {
  box-sizing: border-box;
}

<h1>Контакт</h1>

Answer 2

Три линии на рисунке можно сформировать с помощью двух псевдо-элементов:

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

Единственный минус данного подхода, все позиционирование должно быть рассчитано вручную.

Пример реализации:

h1 {
  text-align: center;
  position: relative;
}

h1::after,
h1::before { /* все псевдо-элементы имеют одинаковую ширину и отступ слева */
  content: '';
  position: absolute;
  width: 50px;
  left: 50%;
  transform: translateX(-50%);
}

h1::after {
  border-top: 1px dotted #414141;
  bottom: calc(-0.67em - 1px); /* располагаем элемент на границе маргина h1 со смещением вниз на один пиксель*/
}

h1::before {
  bottom: calc(-0.67em - 6px); /* располагаем элемент на границе маргина h1 со смещением вниз на один пиксель и еще на половину высоты
  можно использовать то же смещение что и в ::after и сместить вниз за счет transform:

  bottom: calc(-0.67em - 1px); 
  transform: translate(-50%, 50%);
*/
  height: 10px;
  border-top: 1px dotted #e74c3c;
  border-bottom: 1px dotted #e74c3c;
}

* {
  box-sizing: border-box;
}

*:after,
*:before {
  box-sizing: border-box;
}

<h1>Контакт</h1>
<div class="sixteen columns">
  <div class="sub-text-line"></div>
</div>

БЛОГ НА HUSL

Как реализовать данный эффект без доп вложенности?

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