CSS 이미지 태그로 추가 한 이미지 정렬

Question

div 요소에 체크 박스를 추가하고 싶습니다. content:before 태그를 사용하면 쉽게 수행 할 수 있습니다. 따라서이 CSS

.btn { 
    border: 1px solid #606060; 
    background: #e3e3e3; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 

    -moz-box-shadow: inset 0 0 5px #38414d; 
    -webkit-box-shadow: inset 0 0 5px #38414d; 
    box-shadow:   inset 0 0 5px #38414d; 
    cursor: pointer; 
    text-align: center; 
    width: 200px; 
    height: 55px; 
    line-height: 55px; 
} 


.btn:before { 
    content:url(http://tinyurl.com/pmrqpon); 
} 

이 버튼이 표시됩니다.

문제는 새로운 콘텐츠 요소의 CSS이 동적으로 추가된다는 점이다. 하지만 "BUTTON"텍스트의 위치를 ​​변경하지 않고 바로 div에 입력해야합니다. 어떻게이 문제를 해결할 수 있습니까?

Answer 1

이 같은 코드를 변경할 수 있습니다

.btn { 
    ... 
    position: relative; 
} 

.btn:before { 
    ... 
    position: absolute; 
    top: 10px; 
    right: 10px; 
} 

Answer 2

당신은 절대적으로 의사 요소를 배치해야합니다.

JSFiddle Demo

HTML

버튼

CSS

.btn { 
    border: 1px solid #606060; 
    background: #e3e3e3; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 

    -moz-box-shadow: inset 0 0 5px #38414d; 
    -webkit-box-shadow: inset 0 0 5px #38414d; 
    box-shadow:   inset 0 0 5px #38414d; 
    cursor: pointer; 
    text-align: center; 
    width: 200px; 
    height: 55px; 
    line-height: 55px; 
    position:relative; 
} 

.btn:before { 
    content:url(http://tinyurl.com/pmrqpon); 
    position:absolute; 
    top:0; 
    left:20%; **(adjust as required)** 
}