тег hr показывает линию в 2 цвета на цветном фоне

Question

Я использую тег hr.Это работало хорошо, пока я не дал тексту цветной фон.Теперь я вижу белую линию под черной линией.Как увидеть только черную линию?

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  height: 1px;
  color: #fff;
}

<div>
    Testing<br />
    Testing<br />

  <hr />

Testing<br />
Testing<br />

</div>

Answer 1

Вам необходимо изменить CSS для тега hr,

Проект HTML 5 Boilerplate в его таблице стилей по умолчанию указывает следующее правило:

hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; }

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid white;
  margin: 1em 0;
  padding: 0;
}

<div>
  Testing<br /> Testing
  <br />

  <hr /> Testing

  <br /> Testing
  <br />

</div>

Answer 2

Чтобы изменить цвет hr, вы используете border-color, а не color.

Чтобы изменить высоту hr, манипулируйте шириной (-ами) границы:

div {
  background-color: #eab126;
  min-height: 100px;
}

hr {
  border-color: black;
  border-top-width: 0px;
}

<div>
  Testing<br /> Testing
  <br />

  <hr /> Testing

  <br /> Testing
  <br />

</div>