Ich implementiere eine Schließen-Schaltfläche für ein Element, das Text mit CSS enthält. Der Schließen-Button wird aus einem Pseudoelement mit @ inhaltlich generiecontent:'X';. Ich brauche den Cursor, um ein Zeiger auf dieses "X" zu werden, also habe ich verwendet:

cursor:pointer;

In Chrome und Firefox funktioniert es einwandfrei, in Internet Explorer scheint es jedoch nicht zu funktionieren (Test unter IE11 Windows 7).

DEM (Test im IE)

Ich habe es auch mit @ versuccursor:hand; aber es löst das Problem nicht. Wie kann ich den Cursor zu einem @ machpointer beim schweben auf das "X" aber nicht auf den text des div?

Relevanter Code:

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

<div>some text</div>

--BEARBEITEN-

Ich bin mir bewusst, dass ich ein Kind oder Geschwister im Markup mache und mich bewerbecursor:pointer; to es wird funktionieren, aber ich möchte das Markup minimieren und ein Pseudoelement für den Schließen-Button verwenden, da es keinen semantischen Wert hat.