▷Botón de cierre X solo usando css ✔️ Foro Ayuda 【 2024 】

Mantén la atención ya que en esta división encontrarás la contestación que buscas.

Solución:

Como un CSS puro solución para el símbolo de cierre o ‘tiempos’ puede usar el código ISO con el contenido propiedad. A menudo uso esto para :después o :antes de pseudoselectores.

El código de contenido es 0d7.

Ejemplo

div:after
  display: inline-block;
  content: "0d7"; /* This will render the 'X' */

A continuación, puede diseñar y colocar el pseudoselector de la forma que desee. Espero que esto ayude a alguien :).

El punto principal que estás buscando es:

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

Para su información, puede hacer un botón de cierre usted mismo muy fácilmente:

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

Pruebe esta cruz en 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);