X close button only using css

Question

How can I make a cross (X) that can be used as a close button using only CSS3?

I've been looking for a long time and haven't been able to figure out how.... When I look at source code on a website that uses it, I usually find something strange that renders the code I'm looking at worthless.

Answer 1

You can use the ISO code with the content property as a pure CSS solution for the closing or 'times' symbol. This is frequently used for:after or:before pseudo selectors.

The content code is \00d7.

Example

div:after{
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}

The pseudo selector can then be styled and positioned as desired.