Семантический способ укладки двух символов в элемент :: before?

Question

Я пытаюсь добавить символы контрольного списка в левый край ячеек таблицы. Пока это работает. Когда я пытаюсь выложить еще один символ поверх символа контрольного списка, все же все становится некрасиво. Я нашел несколько способов добиться результата, которого я добился, но никто из них не выглядит особенно хорошо для меня. Есть ли у кого-то лучшая идея, желательно такая, которая позволила бы сосредоточиться на семантике?

.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

Если вы позиционируете как ::before, так и ::after абсолютно и добавьте дополнение к элементу <td>, вы можете получить нужный эффект. Для этого требуется больше CSS и некоторые значения, сильно привязанные к вашему размеру шрифта. Но если вы измените значения px на em, он должен хорошо масштабироваться.

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

Я хотел бы отобразить ◯ как встроенный элемент, затем поместить ✘ над ним, используя абсолютное позиционирование. Кажется, работа без лишней разметки.

.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>

почему это ввести разрыв строки?

Поскольку .check является div с display: block; так что содержимое будет отображаться на его собственной линии. Установите его на display: inline-block; или примените float: left; к элементу .checklist:before, и эти элементы будут в одной строке.