html - 有两种颜色的水平线

Question

我正在尝试在 html 页面的图片上模拟相同的效果。是否可以在不使用图像或 JS 的情况下完成此操作？我知道可以通过在顶部和底部添加边框颜色来水平完成，但我找不到水平完成的方法。

Answer 1

你可以给你的元素添加一个灰色的border-bottom，并用一个红色的::after伪元素将它部分重叠:

h1 {
  border-bottom: 2px solid #E5E5E5;
}
h1:after {
  content: '';
  display: block;
  border-bottom: 2px solid #EC1C24;
  margin-bottom: -2px;
  max-width: 200px;
}

<h1>Haberler</h1>