너비에 좌우 값의 영향

Question

absolute으로 지정된 div의 값을 left 및 right에 설정하는 것과 다른 점은?
내가 right에 대한 값을 설정할 때 텍스트는 가상 클래스 FIDDLE1에 오른쪽으로 채워집니다.
그러나 아니요 leftFIDDLE2. widthFIDDLE3을 설정해야합니다.

그래서 너비를 설정하지 않고 left을 사용하고 결과를 FIDDLE1으로 가져올 수 있습니까?

CSS :

div { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
div:after { 
    content: 'ce champs est obligatoire'; 
    position: absolute; 
    left: 100px; 
} 

Answer 1

문제는, 그 폭이 넓은 div에 같은 300 픽셀을한다면 상대적으로 설정 사업부 그래서, 100 픽셀의 고정 폭을 가지고 있다는 것입니다 이후의 내용이 적합하다는 것을 알기 때문에 텍스트를 감싸지 않을 것입니다.

white-space:nowrap; 뒤에 div를 입력하면 문제가 발생하지 않도록 http://jsfiddle.net/jme11/6avYE/과 같습니다.

OR,

또 다른 옵션은 위치가 다른 사업부의 사업부를 포장하고 래퍼 DIV를 설정하는 것입니다 : 상대를 대신 같은 내부 사업부의 : 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; 
}