S CSS: проверить, имеет ли элемент атрибут

Question

Мне нужно проверить, есть ли у элемента атрибут для стилей, применяемых на мобильных устройствах (или в адаптивном режиме). Например:

<tr>
    <td>Some text here</td>
    <td data-content="Hello there">Other text here</td>
    <td data-content="Hi there">Final text here</td>
</tr>

Браузер:

------------------------------------------------------
| Some text here | Other text here | Final text here |
------------------------------------------------------

Мобильные устройства (требуется вывод):

--------------------------------
| Some text here               |
| Hello there: Other text here | 
| Hi there: Final text here    |
--------------------------------

S CSS:

tr {
    td {
        ...

        @if (&[data-content]) {
            &:before {
                content: attr(data-content) ":";
                float: left;
                font-size: 12px;
                font-weight: bold;
                margin: 0 5px 0 0;
                text-transform: uppercase;
            }
        }
    }
}

Мобильные устройства (выходной ток):

--------------------------------
| : Some text here             |
| Hello there: Other text here | 
| Hi there: Final text here    |
--------------------------------

Answer 1

Я нашел решение. Видимо, это было довольно просто ...

S CSS:

tr {
    td {
        ...

        &[data-content] {
            &:before {
                content: attr(data-content) ":";
                float: left;
                font-size: 12px;
                font-weight: bold;
                margin: 0 5px 0 0;
                text-transform: uppercase;
            }
        }
    }
}

Токовый выход:

--------------------------------
| Some text here               |
| Hello there: Other text here | 
| Hi there: Final text here    |
--------------------------------