Agregar bullets a los headers

Este es un recurso muy utilizado y es fácil de hacer, a continuación vamos a ver paso a paso como hacerlo.

Este mini-turorial sirve en los casos que queremos agregar un bullet a la ziquiera de nuestros headers H1, H2, H3, según sea el caso.

Aquí un ejemplo:

Como se ve en el ejemplo podemos poner un bullet del lado izquierdo de nuestros títulos controlándolo totalmente desde CSS, esto tiene muchas ventajas ya que puedes cambiar el bullet modificando un sólo archivo de CSS y no cada documento como se tendría que hacer si el bullet fuera directamente insertado como imagen.

Lo primero que vamos a hacer es darle el estilo y tamaño a nuestro título tal y como queremos que quede en este caso vamos a generar el código para que el diseño sea igual que la imagen que uso de ejemplo.

h1 {
font:bold 26px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
}

Resultado en HTML.

A continuación vamos a agregar el bullet como background:

h1 {
font:bold 26px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
background:url(bullet.png);
}

Resultado en HTML.

En este punto es necesario hacer que el background no se repita como tile, para esto agregamos una instrucción en el CSS, no-repeat.

h1 {
font:bold 26px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
background:url(bullet.png) no-repeat;
}

Resultado en HTML.

Hasta aquí todo bien, sólo falta posicionar el bullet a la mitad de la altura vertical de la caja del H1, para esto agregamos dos instrucciones más: 0 50%, el cero se refiere a la distancia desde el costado izquierdo y el 50% nos dice que el background quedará posicionado al 50% de la altura de la caja del h1.

h1 {
font:bold 26px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
background:url(bullet.png) no-repeat 0 50%;
}

Ya por último tenemos que hacerle un poco de espacio al bullet por que como vemos este queda debajo del texto. Para esto agregamos una instrucción más para darle padding del lado izquierdo.

h1 {
font:bold 26px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
background:url(bullet.png) no-repeat 0 50%;
padding-left:20px;
}

Resultado final en HTML.