位置：之前：之后的psuedo元素

Question

1. 有没有办法获取伪元素:after，以服从我的容器的宽度，所以它是橙色结束的位置（在500px之后），或者:after总是会踢在元素内的内容结束的地方？

2. 我元素的margin和/或padding是否会影响:before和:after伪元素？我以为他们有自己的边距和填充。至少能够为我的元素添加填充不应该影响伪元素....

请参阅以下codepen：http://codepen.io/anon/pen/wgaYZg

#container {
  width: 500px;
  background-color: orange;
  display: inline-block;
  padding: 50px;
  margin: 50px;
}
#container:before {
  background-color: grey;
  content: "before";
  width: 100px;
  display: inline-block;
}
#container:after {
  background-color: grey;
  content: "after";
  width: 100px;
  display: inline-block;
}

<div id="container">hello world</div>

这就是我要做的事情：

Answer 1

要理解伪元素:before和:after，只需将它们视为<span>标记的限制版本，因为据我所知，伪元素只能包含图像或纯文本。默认情况下，他们没有自己的padding或margin。

<container><:before>normal content<:after></container>

为了实现你的布局，我建议使用位置技巧而不引入任何新标签。

＆＃13;

＆＃13;

#container {
  background-color: orange;
  position: relative;
  width: 500px;
  padding: 50px 100px;
  box-sizing: border-box;
}
#container:before,
#container:after {
  position: absolute;
  top: 0;
  bottom: 0;
}
#container:before {
  background-color: grey;
  content: "before";
  width: 100px;
  left: 0;
}
#container:after {
  background-color: grey;
  content: "after";
  width: 100px;
  right: 0;
}

＆＃13;

<div id="container">hello world</div>

＆＃13;

＆＃13;

＆＃13;

否则，如果您可以将纯文本包装到HTML标记中，那么使用flexbox很容易。

＆＃13;

＆＃13;

#container {
  width: 500px;
  background-color: orange;
  display: flex;
}
#container span {
  padding: 50px;
  flex: 1;
}
#container:before {
  background-color: grey;
  content: "before";
  width: 100px;
}
#container:after {
  background-color: grey;
  content: "after";
  width: 100px;
}

＆＃13;

<div id="container"><span>hello world</span></div>

＆＃13;

＆＃13;

＆＃13;