添加CSS內容標記對齊圖像

Question

我想添加一個複選框到div元素。這可以通過使用​​標籤輕鬆完成。所以這個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動態地添加。但我需要把它放在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)** 
}