html - CSS Fill::before with background 颜色

Question

我正在尝试用背景色填充 div::before。当我设置固定宽度时它可以工作，但如果我想要:

width: auto;

它不工作。

如果我设置:

width: 100%;

它重叠并填充相同的颜色到 div 的末尾。

这是我要实现的目标:

这里还有 jsfiddle 链接: http://jsfiddle.net/ofyt1cb8

如果您将 .container::before width 设置为固定长度，它会起作用。但我希望它自动“捕捉”到居中的 div。

这可能吗？

完整代码:

<div class="container">
  CENTERED
</div>


.container {
  width: 300px;
  background: #000;
  color: #FFF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.container:before {
  content: "";
  position: absolute;
  left: 0;
  width: auto;
  height: 20px;
  background: #FF0000;
}

谢谢!

Answer 1

Flexbox 可以做到这一点

body {
  background: blue;
}

.container {
  display: flex;
  color: #FFF;
  margin-bottom: 1em;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
  background: pink;
}

.container:after {
  content: "";
  flex: 1;
  background: lightgreen;
}

<div class="container">
  CENTERED
</div>

<BR/>
<div class="container">
  CENTERED HEADING
</div>