: 내용의 밑에 선택기 후에?

Question

문제가 있습니다. 내가 CSS를 바로 클릭하여 버튼을 얻으려고 애 쓰고 : 선택기 후.

.text-bg .text-top-left{ 
    position:absolute; 
    width:50%; 
    background:rgba(95,87,79,0.9); 
    padding:20px; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    top:50px; 
    left:-48%; 
} 

.text-bg .text-top-left:after{ 
    content:'>'; 
    font-family:'Entypo'; 
    width:20px; 
    height:10px;  
    color:black; 
    background:white; 
} 

바로 지금>는 내 텍스트 왼쪽 상단에 있습니다. 그러나 상자의 바깥쪽에 중심에 두는 것이 좋습니다. 무엇을 바꾸어야합니까?

JsFiddle

는 시도 : position:absolute, float:right, text-align:right

Answer 1

이 :after 선택에 top,left,right,bottom 값으로 주위 재생합니다.

데모 : http://jsfiddle.net/lotusgodkk/w1v07drv/1/

CSS : 오른쪽를 들어

.text-bg .text-top-left { 
    position:absolute; 
    width:50%; 
    background:rgba(95, 87, 79, 0.9); 
    padding:20px; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    top:50px; 
    left:0; 
} 
.text-bg .text-top-left:after { 
    content:'>'; 
    font-family:'Entypo'; 
    width:20px; 
    height:10px; 
    color:#FFF; 
    position:absolute; // Add this 
    top:0; // to place it at the top 
    right:10px; //to place it extreme right at the offset of 10px 
} 

: 변경 right 0 또는 선호하는 값. 왼쪽를 들어

: 귀하의 코드가 멋진