Duda compleja sobre transiciones de subrayado progresivo

Bueno lo primero describir la idea que tenía: Al igual que lo tenéis en este foro cuando pasas el ratón por encima del título de un tema, dicho título se subraya progresivamente. Pues bien yo quería hacer lo mismo pero con los títulos de los foros de la página principal. Indagué mucho por internet para no molestaros aquí con la duda de nuevo dado que parezco el mayor spammer del mundo pero al final solo tope un tutorial que hacía un efecto parecido. En este caso el código que voy a postear se supone que hace lo mismo pero en vez de subrayar desde la izquierda subraya desde el centro hasta los extremos. A mi no me importaría mucho uno u otro pues creo que ambos son bonitos pero como no me funciona no soy capaz de comprenderlo. Aquí les dejo el código a ver si alguien me puede ayudar. Supongo que con que me expliquen uno de los dos efectos será suficiente no tiene porque ser necesariamente el que yo encontré por internet pues me imagino que probando podré replicar cualquiera de ambos.

Código:

a.forumtitle{
  position: relative;
  color: #fff;
  text-decoration: none;
}

a.forumtitle:hover {
  color: #fff;}

a.forumtitle:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 2s ease-in-out 2s;
  -moz-transition: all 2s ease-in-out 2s;
  -o-transition: all 2s ease-in-out 2s;
  transition: all 2s ease-in-out 2s;
}

a.forumtitle:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

Por cierto si os parece que pregunto demasiado y debería bajar un poco el ritmo basta un comentario para que levante el pie del acelerador. La verdad que tengo una sed de código muy grande.