Position of :before :after psuedo elements - css

Question

Is there a way to get the pseudo element :after, to obey the width of my container, so it is where the orange ends (after 500px), or will :after always kick in where the content inside the element ends?
Is the margin and/or padding of my element, always going to affect the :before and :after pseudo elements? I thought they have their own margin and padding. At least being able to add a padding to my element shouldn't affect the pseudo elements should it ....
See the following 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>
This is what I'm looking to do:

Answer 1

To understand pseudo element :before and :after, just think them as limited version of <span> tags, since a pseudo element can only contain image or plain text as far as I know. They don't have their own padding or margin by default.
<container><:before>normal content<:after></container>
To achieve your layout, I suggest to use position tricks without introducing any new tags.
#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;
}
<div id="container">hello world</div>
Otherwise, if you can wrap the plain text into a HTML tag, that would be easy to do with flexbox.
#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;
}
<div id="container"><span>hello world</span></div>