// Forma de usar el atributo a dentro del css, crearemos algunos LINKS,

En este primer ejemplo podemos observar:
:before, nos colocara el texto antes del link y :after justo después como podemos observar en nuestro ejemplo.

1. a[href$=".doc"]:before { content : “Descarga word: “; } /*termina link .doc*/
2. a[href^="ftp://"]:after { content : “: Descarga FTP: “; } /*comienza link ftp://*/

// Modo de empleo

<a href="http://www.practi-k.es/prueba<strong>.doc" title="documento word" target="_blank"> fichero </a><br />
<a href=<strong>"ftp://www.practi-k.es" title="Acceso al FTP de prácti-k" target="_blank"> El siguiente fichero</a><br />

// ver ejemplos

En este otro ejemplo usaremos la propiedad title de los enlaces para insertar imágenes en nuestros links

CSS:
1. a[title="modificar"]:before { content : url(img/modificar.png); } /* usara una imagen (delante)*/
2. a[title="usuarios"]:after { content : url(img/user.png); } /* usara una imagen (atrás)*/
3. a[title=""]{ padding: 3px; font-family: “Times New Roman”, Times, serif; color: #8E008E; font-style: italic}

// Modo de empleo

<a href="http://www.practi-k.es/modificar"  title="modificar" target="_blank">modificar perfil </a>
<a href="ftp://www.practi-k.es/usuarios" title="usuarios" target="_blank">usuario</a>
<a href="ftp://www.practi-k.es/usuarios" title="" target="_blank"> usuario</a>

// ver ejemplos

// Ahora vamos a jugar con los type y los name de los input.
// Sólo funciona así en FF paraIE hay que crear clases. (Lo subiré en breve).

input[type="submit"] {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
border: 1px solid #333;
background-image: url(http://www.practi-k.es/home/css/img/tick.png);
background-repeat: no-repeat;
padding-left: 20px;
height: 20px;
font-size: 8pt;
vertical-align: middle;
}
input[type="reset"] {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
border: 1px solid #333;
background-image: url(http://www.practi-k.es/home/css/img/borrar.png);
background-repeat: no-repeat;
padding-left: 20px;
font-size: 8pt;
height: 20px;
vertical-align: middle;
}
input[type="password"] {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
border: 1px solid #333;
padding-left: 20px;
height: 16px;
background-image: url(http://www.practi-k.es/home/css/img/key.png);
background-repeat: no-repeat;
}
input[name="login"] {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
border: 1px solid #333;
padding-left: 20px;
height: 16px;
background-image: url(http://www.practi-k.es/home/css/img/user.png);
background-repeat: no-repeat;
}
input[type="email"] {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
border: 1px solid #333;
padding-left: 20px;
height: 16px;
font-size: 8pt;
background-image: url(http://www.practi-k.es/home/css/img/email.png);
background-repeat: no-repeat;
}

input[type="radio"]{
background-color: none;
border: 0;
}
input[type="checkbox"]{
background-color: none;
border: 0;
}

ver ejemplo

Compartelo