Impact of values of left and right on width - css

Question

Why there a difference between setting a value in left and right for a div positioned as absolute.
When i set a value for right it's okey the text fill right in the pseudo class FIDDLE1.
But not with left FIDDLE2.
I have to set a width FIDDLE3.
So how can i use left without setting a width and get result as FIDDLE1 ?
CSS:
div {
width: 100px;
height: 100px;
position: relative;
}
div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
}

Answer 1

The issue is that the div which is set to relative has a fixed width of 100px, if you were to make the width of that div wider, such as 300px, so that the content after were to fit, it would not wrap the text.
Give the div after white-space:nowrap; like this: http://jsfiddle.net/jme11/6avYE/ to avoid the problem.
OR,
Another option would be to wrap the div in another div and set the wrapper div to have the position: relative instead of the inner div like this: http://jsfiddle.net/jme11/PhVLj/
div:not(div>div) {
width: 500px;
height: 100px;
position: relative;
}
div>div {
width: 100px;
height: 100px;
background-color: aliceblue;
border: 1px gray solid;
}
div>div:after {
content: 'ce champs est obligatoire';
position: absolute;
left: 100px;
/* right: -167px;
width: 157px;*/
background-color: rgb(230, 122, 38);
color: white;
padding: 8px 10px;
border-radius: 5px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 13px;
}