How to create X close button by using CSS

As a pure CSS solution for the close or ‘times’ symbol, you can use the ISO code with the content property. I often use this for :after or :before pseudo selectors.

The content code is \00d7.

Example

div:after{
display: inline-block;
content: “\00d7”; /* This will render the ‘X’ */
}

You can then style and position the pseudo selector in any way you want.

Hope this helps someone :).

Revisions

No comments yet.

Leave a Reply