之后用线条标题，有2种不同的尺寸

Question

我正在努力实现以下功能，使用纯CSS并且没有图像：

正如你所看到的，之后是一个带有一条线的标题。问题是，该线应具有2种不同的颜色，更重要的是2种不同的高度。

• 第一部分颜色为橙色，高度为3px，固定宽度为100px（左边填充：15px）
• sedond部件颜色为＃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，您不必为该行指定一定的宽度，您可以确保它始终具有响应性。

我们将采用渐进式增强方法。我们将使用::before代替:before在IE8之后进行切割。在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！

Answer 2

您可以使用:before和:after

解决此问题

http://jsfiddle.net/oyxmxoLs/1/

h1 {
    overflow: hidden;
}

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

<h1><span>OUR ARTICLES</span></h1>

Answer 3

您还可以使用ICompanyRepository.AddOrUpdate伪元素添加橙色线。

＆＃13;

＆＃13;

:before

＆＃13;

h1 {
    overflow: hidden;
}
h1 span {
    display: inline-block;
    position: relative;
}
h1 span:after, h1 span:before {
    content: "";
    position: absolute;
    height: 1px;
    left: 100%;
    top: 45%;
    margin-left: 15px;
}
h1 span:after {
    width: 999px;
    background: #E1E1E1;
}
h1 span:before {
    height: 3px;
    z-index: 1;
    margin-top: -1px;
    border-radius: 2px;
    width: 100px;
    background: orange;
}

＆＃13;

＆＃13;

＆＃13;