html - 之后以线为标题，有 2 种不同的尺寸

Question

我正在尝试使用纯 CSS 和无图像实现以下目标:

如您所见，它是一个标题，后面有一行。问题是，这条线应该有 2 种不同的颜色，更重要的是，有 2 种不同的高度。

• 第一部分颜色为橙色，高度为 3px，宽度固定为 100px(padding-left:15px)
• 第二部分的颜色是#E1E1E1，应该填满该行的其余部分。

我的第一次尝试是这样的:

<h1><span>OUR ARTICLES</span></h1>
<style>
    h1 {
        overflow: hidden;
    }

    h1 span {
        display: inline-block;
        position: relative;
    }
    h1 span:after {
        content: "";
        position: absolute;
        height: 1px;
        top: 45%;
        width: 999px;
        background: #E1E1E1;
        border-left: 100px solid orange;
        left: 100%;
        margin-left: 15px;
    }
</style>

参见 http://jsfiddle.net/oyxmxoLs/

但是如你所见，我无法使橙色部分比灰色部分更厚。

有什么想法吗？

Answer 1

另一种方式:Flexbox

使用 display: flex，您不必为线条指定一定的宽度，并且可以确保它始终响应。

我们将采用渐进式增强方法。我们将在 IE8 之后通过使用 ::before 而不是 :before 进行削减。在 IE9 中，只会显示灰线(在标题下方)。

h1 {
  align-items: center;
  color: #444;
  display: flex;
  font: 18px/1.3 sans-serif;
  margin: 18px 15px;
  white-space: nowrap;
}

h1::before {
  background-color: orange;
  content: "";
  height: 4px;
  margin-left: 10px;
  order: 2;
  width: 100px;
}

h1::after {
  background-color: #E1E1E1;
  content: "";
  display: block;
  height: 2px;
  order: 3;
  width: 100%;
}

<h1>Our articles</h1>

不要忘记添加 vendor-prefixes !