Я реализую кнопку закрытия элемента, содержащего текст с помощью CSS. Кнопка закрытия генерирует контент из псевдоэлемента сcontent:'X';, Мне нужен курсор, чтобы стать указателем на этот «X», поэтому я использовал:

cursor:pointer;

Он отлично работает в Chrome и Firefox, но, похоже, не работает в Internet Explorer (тестирование в IE11 windows 7).

DEMO (тест в IE)

Я тоже пробовал сcursor:hand; но это не решает проблему. Как я могу сделать курсоруказатель при наведении курсора на «X», но не на текст div?

Соответствующий код:

div{
    font-size:2em;
    position:relative;
    display:inline-block;
}
div::before{
    content:'X';
    cursor:pointer;
    display:block;
    text-align:right;
}

<div>some text</div>

--РЕДАКТИРОВАТЬ--

Я знаю, что сделать ребенка или брата в разметке и применяяcursor:pointer; это будет работать, но я хотел бы минимизировать разметку и использовать псевдоэлемент для кнопки закрытия, так как он не имеет семантического значения.