X close button only using css

Question

How to make a cross (X) only in CSS3, to use as a close button?

I've been searching for a long time, and cannot found how.... When I look at source code on a website using it, there's always something weird which makes the code I take unusable.

The X button I want: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

When you click an image, this is the cross on the right:

I think this would be great if somebody can post a simple universal CSS code to make a simple X cross in CSS3.

Answer 1

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 :).

Answer 2

Try This Cross In CSS

.close {    position: absolute;    right: 32px;    top: 32px;    width: 32px;    height: 32px;    opacity: 0.3;  }  .close:hover {    opacity: 1;  }  .close:before, .close:after {    position: absolute;    left: 15px;    content: ' ';    height: 33px;    width: 2px;    background-color: #333;  }  .close:before {    transform: rotate(45deg);  }  .close:after {    transform: rotate(-45deg);  }

<a href="#" class="close">