將內容添加到複選框

Question

我的複選框上有以下CSS工作。如何添加內容屬性以在其上顯示文本。

.checkBox .x-form-checkbox { 
    height: 25px; 
    width:75px; 
    background: #9d9d9d; 
    background-image: -webkit-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -moz-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -ms-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -o-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: linear-gradient(to bottom, #9d9d9d, #f3f3f3); 
    font-family: Arial; 
    color: red; 
    font-size: 15px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 
.checkBox.x-form-cb-checked.x-form-checkbox { 
    color:black; 
    border:1px solid black; 
} 

我試過使用.checkBox .x-form-checkbox + .checkBox:after{ content: 'text over'; }但它沒有工作。請幫助

FIDDLE：https://fiddle.sencha.com/#fiddle/2qu

Answer 1

事情是這樣的正常工作在Chrome：

.checkBox .x-form-checkbox { 
    height: 25px; 
    width:75px; 
    background: #9d9d9d; 
    background-image: -webkit-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -moz-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -ms-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: -o-linear-gradient(top, #9d9d9d, #f3f3f3); 
    background-image: linear-gradient(to bottom, #9d9d9d, #f3f3f3); 
    font-family: Arial; 
    color: red; 
    font-size: 15px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
    position: relative; 
    margin-top: 25px; 
} 

.x-form-checkbox:before { 
    color: #FFFF00; 
    content: "Text"; 
    display: block; 
    height: 25px; 
    left: 0; 
    position: absolute; 
    top: -25px; 
    width: 100px; 

} 

但它沒有例如在Firefox中，比較Is the :before pseudo-element allowed on an input[type=checkbox]?

這可以做在Javascript的伎倆：

var checkboxes = document.getElementsByClassName('x-form-checkbox'); 
var textDivClass = 'Checkbox-Text'; 
var checkboxTmp = []; 
for(var i = 0; i < checkboxes.length; i++){ 
    var txtEl = document.createElement('DIV'); 
    var classNode = document.createAttribute('class'); 
    classNode.nodeValue = textDivClass; 
    var textnode = document.createTextNode(checkboxes[i].getAttribute('data-title')); 
    txtEl.appendChild(textnode); 
    txtEl.setAttributeNode(classNode); 
    checkboxes[i].parentElement.appendChild(txtEl); 
    checkboxTmp.push(checkboxes[i]); 
} 

while(checkboxes.length != 0) 
    checkboxes[0].parentElement.removeChild(checkboxes[0]); 

var checkboxes = document.getElementsByClassName(textDivClass); 
for(var i = 0; i < checkboxes.length; i++){ 
    checkboxes[i].parentElement.appendChild(checkboxTmp[i]); 
}