CSS label: раньше со стилем контента не работало, если для элементов не указан id

Question

Я создал нажимаемую кнопку am / pm, которая является частью селектора времени. Он будет находиться внутри динамической таблицы c (таблица html, где пользователь может нажать кнопку, чтобы добавить строки в таблицу). Поскольку он находится в динамической таблице c, я буду генерировать элементы и не буду использовать идентификаторы элементов при попытке доступа к ним в javascript (поскольку я не буду знать их по отдельности).

Имея метку, нажимаемую ниже, можно ли достичь того же результата, не назначая идентификатор для флажка?

.text_toggle
{
    display: none;
}

.text_toggle + label
{
    position: relative;
    cursor: pointer;
    color: #aaa;
}

.text_toggle + label:hover
{
    color: blue;
}

.text_toggle:not(:checked) + label:before
{
    content: attr(data-off);
    position: absolute;
}

.text_toggle:checked + label:before
{
    content: attr(data-on);
    position: absolute;
}

<input id="am_pm" class="text_toggle" type="checkbox" checked>
                <label for="am_pm" data-off="am" data-on="pm"></label>

Answer 1

Да, вы можете создать метку и поставить внутри нее свой флажок, а затем добавить еще один элемент со своими пользовательскими атрибутами.

.switch{
/* other styles here */
}
.switch > input[type=checkbox]{
display:none;
}

.switch input[type=checkbox] + span::before{
  content: attr(data-off)
}
.switch input[type=checkbox]:checked + span::before{
content: attr(data-on)
}

<label class="switch">
<input type="checkbox" />
<span data-off="Off" data-on="On"></span> <!-- I made it with span, but feel free to use any other tag -->
</label>