Manière sémantique d'empiler deux caractères dans un élément :: before?

Question

J'essaie d'ajouter des symboles de liste de contrôle au bord gauche des cellules du tableau. Jusqu'à présent, cela fonctionne. Quand j'essaye d'empiler un autre caractère au-dessus du symbole de liste de contrôle cependant, les choses deviennent moche. J'ai trouvé plusieurs façons d'obtenir le résultat que je recherche, mais aucune d'entre elles ne me semble particulièrement bonne. Est-ce que quelqu'un a une meilleure idée, de préférence une qui permettrait de se concentrer sur la sémantique?

.checklist::before { 
 
    content: "◯ "; 
 
} 
 
.checklistabs::before { 
 
    content: "◯ "; 
 
    position: absolute; 
 
} 
 
.check::before { 
 
    content: " ✘"; 
 
    position: absolute; 
 
    font-size: 130% 
 
} 
 
.checked { 
 
    position: absolute; 
 
    font-size: 130% 
 
} 
 
.checklisttext { 
 
    margin-left: 1.5em; 
 
}

<table> 
 
    <tr> 
 
    <td class="checklist"> 
 
     perfect as long as nothing needs to be overlaid 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <b class="checked">✘</b> 
 
     ◯ Seems to work best, but has explicit bullet symbol as part of the text. 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="checklistabs" /> 
 
     <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If the bullet symbol goes into another absolutely positioned item, we need to make space at the beginning of the text. ::before would have been much more elegant. 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="checklist"> 
 
     <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;why does this introduce a linebreak? 
 

 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="checklistabs"> 
 
     <div class="check" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Saving on divs 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="checklistabs" /> 
 
     <div class="check" /> 
 
     <div class="checklisttext">So this works...</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="checklist check"> 
 
     Looks preferrable from a semantic point of view but does not work - see http://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

Si vous placez à la fois la ::before et ::after absolument et ajouter un rembourrage à l'élément <td> vous pouvez obtenir l'effet que vous voulez. Cela nécessite plus de CSS et certaines valeurs fortement liées à la taille de votre police. Mais si vous changez les valeurs de px en em, il devrait bien évoluer.

table { 
 
    width: 350px; 
 
} 
 
    
 
.checklist { 
 
    padding: 0 0 0 20px; 
 
    position: relative; 
 
} 
 

 
.checklist::before, 
 
.checked::after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 17px; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 

 
.checklist::before { 
 
    content: "◯ "; 
 
} 
 

 
.checked::after { 
 
    content: " ✘"; 
 
    font-size: 130%; 
 
}

<table> 
 
    <tr> 
 
    <td class="checklist checked"> 
 
     A little more CSS and positioning, but will work well if the text linebreaks. 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

J'afficherait le ◯ comme un élément en ligne, puis placez le ✘ dessus en utilisant le positionnement absolu. Semble fonctionner sans balisage inutile.

.checklist:before { 
 
    content: "◯ "; 
 
} 
 
.checklist:after { 
 
    content: " ✘"; 
 
    position: absolute; 
 
    left: .6em; 
 
    font-size: 1.3em; 
 
    top: .6em; 
 
}

<table> 
 
    <tr> 
 
    <td class="checklist"> 
 
     perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid perfect as long as nothing needs to be overlaid 
 
    </td> 
 
    </tr> 
 
</table>

pourquoi cette introduction un saut de ligne?

Parce que .check est un div avec display: block; donc son contenu sera affiché sur sa propre ligne. Réglez-le sur display: inline-block; ou appliquez float: left; à l'élément .checklist:before, et ces éléments seront sur la même ligne.