JSFiddle - React, Tailwind, and code Playground

by matake

HTML

<a href="mi_link">
	<div class="contenedor">
		<div class="div_redondo"></div>
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
	</div>
</a>

<a href="mi_link">
	<div class="contenedor">
		<div class="div_redondo"></div>
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
	</div>
</a>
<br><br>
El problema es que aparece el simbolo "-" mas abajo de los botones lo que hace descuadrar los otros elementos al añadir otra linea. Tambien hace disparar el mouseover antes de estar con el cursor sobre el boton

CSS

.contenedor, .div_redondo, svg{
	display: inline-block;
	width: 25px;
	height: 25px;
}
.div_redondo{
	border-radius: 50%;
	vertical-align: middle;
	background: #000;
}
svg{
	position: relative;
	bottom: 25px;
	fill: #fff;
}