Обернуть текст внутри кнопки asp:

Ответ BoltClock правильный. Единственное, что я хочу добавить, это то, что если вы хотите только выбрать псевдоэлемент, поместите его в промежуток.

Например:

<li><span data-icon='u'></span> List Element </li>

вместо:

<li> data-icon='u' List Element</li>

Таким образом вы можете просто сказать

ul [data-icon]:hover::before {color: #f7f7f7;}

, что будет выделяться только псевдоэлемент, а не весь элемент li