He colocado codigo en un widget de texto y luego lo he colocado en el sidebar. Este es:

<div class="conten_categoria">
<h3>Categorias</h3>
<div class="conten_categoria_link">
<a class="enlace"href="#"><span class="estilo_numero">1</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">2</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">3</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">4</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">5</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">6</span>Categoria </a>
<a class="enlace"href="#"><span class="estilo_numero">7</span>Categoria </a>

</div>
</div>

Luego en la hoja de estilos coloque esto:

.conten_categoria {
width: 100%;
background: #FFFFFF;
}

.enlace {

display: block;
color: #222;
background: #FFFFFF;
text-align: center;
padding: 20px;
margin: 5px 2px 5px 2px;
text-align: center;
border: 0.3px solid rgb(236, 236, 236);
border-radius: 2px;
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;

}
enlace:hover {
background:#ab5678;
color:white;
}

.estilo_numero {
float: left;
font-size: 30px;
}

El problema que tengo es que cuando paso el mouse por encima del enlace. Este no cambia de color a blanco. Solo cambia el fondo. Y cuando lo pruebo en un editor de codigo (sublime..), si funciona. Espero puedan ayudarme. Yo uso el tema "CHILD THEME BRUNCH PRO". Y uso WP como CMS.