css - cursor:pointer on pseudo element IE -

I am implementing a close button on an element containing text with CSS. The close button is generated from the pseudo-element with the content: 'X'; . I need a cursor to become an indicator on that "X", so I used it:

  cursor: indicator;  

It works fine in Chrome and Firefox but it does not work in Internet Explorer (tested on IE11 Window 7).

(test in IE)

I have also tried with cursor: hand , But it does not solve the problem. How can I make the cursor a pointer while hovering over "X", but not on the text of the div?

Relevant code:

  div {font-size: 2em; Status: Relative; Display: inline-block; } Div :: Before {content: 'X'; Cursor: indicator; Display area; Text-align: OK,  

  & lt; Div & gt; Some text & lt; / Div & gt;  

- edit -

I know that a child or brother in the markup Creating and implementing the cursor: indicator; This will work but I would like to reduce the markup and use the pseudo-element for the close button as it does not have any meaning value.

I'm actually delaying the game, but now this problem has been solved.

This solution is a pointer on element , while maintaining a default cursor on the original element .

(See solutions accepted here for a solution that does not include cursor default of the original element)

First of all, this hack For the solution, you have to give up the ability to interact with the original element using the mouse.

Set the default element to cursor: pointer .

Then, setting the basic element to pointer-event: any allows you to "click / hover" the original element.

Then, for pseudo elements, re-enable pointer events with pointer-event: auto .

Voila!

  div {font-size: 2em; Status: Relative; Display: inline-block; / * Remove the ability to interact with parental elements * / Pointer-events: None; / * Apply cursor cursor * / cursor to the original element: indicator; / * Make it more clear which children and parents * for example / background: dark; } Div :: Before {content: 'X'; Display area; Text-align: OK, / * Restore the ability to interact with hair element * / Pointer-incidents: Auto; / * Make it more pronounced, which is for children and for example parents * / width: 30px; Text align: center; Background: white;  

  & lt; Div & gt; Some text & lt; / Div & gt;