Как сделать так, чтобы линии визуально выглядели одинаково?

Question

Имеются два одинаковых раздела, состоящие из заголовка, псевдоэлемента к этому заголовку и абзаца. Если задать внешний отступ, то линии начинают визуально отличаться.
Вот:

*{
  margin: 0;
  padding: 0;
}
/*------------------------*/
.block-1{
  padding: 108px 0;
  text-align: center;
}
.block-1 h2{
  color: #212121;
}
.block-1 h2::after{
  content: "";
  display: block;
  margin: 29px auto 0 auto;
  height: 2px;
  width: 64px;
  background-color: #ff9142;
}
.block-1 p{
  margin: 30px 0 0 0;
  }

/*-------------------------*/
.block-2{
  background-color: #f5f5f5;
  padding: 108px 0;
  text-align: center;
}
.block-2 h2{
  color:  #000;
}
.block-2 h2::after{
    content: "";
    display: block;
    margin: 30px auto 0 auto;
    height: 2px;
    width: 64px;
    background-color: #ff9142;
}
.block-2 p{margin: 30px 0 0 0;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href='test.css'>
<title>TEST</title>
</head>
<body>
  
<div class="block-1">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="block-2">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

</body>
</html>

Answer 1

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

* { margin: 0; padding: 0; }
 /*-------------------------*/
.block-1    { padding: 50px 0; text-align: center; }
.block-1 p  { margin: 30px 0 0 0; }
.block-1 h2 { color: #212121; }
/*-------------------------*/
.block-2    { padding: 50px 0; text-align: center; background-color: #f5f5f5; }
.block-2 p  { margin: 30px 0 0 0; }
.block-2 h2 { color: #000; }
/*-------------------------*/
.block-1 h2::after,
.block-2 h2::after {
  content: "";
  display: block;
  margin: 0 auto;
  height: 0;                        /* ◄◄◄ */
  width: 64px;
  border-bottom: 2px solid #ff9142; /* ◄◄◄ */
}

.block-2 h2::after { margin-top: 30px; }

<div class="block-1">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="block-2">
  <div class="container">
    <h2>Why this is awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

? GIF демо

Просьба опровергнуть решение, если оно не помогает (указав браузер в котором проблема все же осталась) в комментариях к ответу... я проверил только в Chrome для Linux.

// Для проверки масштабирования примера, его надо развернуть на всю страницу после нажатия кнопки "Выполнить код".

БЛОГ НА HUSL

Как сделать так, чтобы линии визуально выглядели одинаково?

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