X 关闭按钮仅使用 css

Question

如何仅在 CSS3 中制作十字 (X) 以用作关闭按钮？

我已经搜索了很长时间，但找不到如何….当我在使用它的网站上查看源代码时，总会有一些奇怪的东西使我使用的代码无法使用。

我想要的 X 按钮：http: //tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

当您单击图像时，这是右侧的十字：

我认为如果有人可以发布一个简单的通用 CSS 代码来在 CSS3 中制作一个简单的 X 交叉，那将是很棒的。

原文由 hedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在寻找的要点是：

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

仅供参考，您可以很容易地自己制作一个关闭按钮：

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

原文由 Pradip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

作为关闭或“时间”符号的 纯 CSS 解决方案，您可以将 ISO 代码与 content 属性一起使用。我经常将其用于 :after 或 :before 伪选择器。

内容代码是 \00d7 。

例子

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

然后，您可以按照您想要的任何方式设置伪选择器的样式和位置。希望这对某人有帮助:)。

原文由 andycrone 发布，翻译遵循 CC BY-SA 3.0 许可协议