X close button only using css

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.

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

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">

Main point you are looking for is:

.tag-remove::before {
  content: 'x'; // here is your X(cross) sign.
  color: #fff;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

FYI, you can make a close button by yourself very easily:

#mdiv {
  width: 25px;
  height: 25px;
  background-color: red;
  border: 1px solid black;
}

.mdiv {
  height: 25px;
  width: 2px;
  margin-left: 12px;
  background-color: black;
  transform: rotate(45deg);
  Z-index: 1;
}

.md {
  height: 25px;
  width: 2px;
  background-color: black;
  transform: rotate(90deg);
  Z-index: 2;
}

<div id="mdiv">
  <div class="mdiv">
    <div class="md"></div>
  </div>
</div>