Estoy intentando mostrar un enlace de mailto. ¿Es eso posible con CSS?CSS después del elemento para insertar el enlace de mailto?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"<a href="mailto:[email protected]">[email protected]</a>"; }
Contenido agregado con el pseudo-elemento no aparece en el DOM, por lo que no no se puede. ¿Pero por qué quieres hacerlo con CSS? No es estilo, el lugar correcto parece estar directamente en el archivo HTML.
Si el objetivo es bloquear el correo no deseado, que suelen utilizar este pedazo de javascript:
var m;
m='in';
m+='f';
m+='[email protected]';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
El correo está dividido para estar seguro de que no aparece como un correo electrónico en cualquier archivo.
se puede ver el resultado aquí: http://jsfiddle.net/tzkDt/
Su valor no aparecía porque las marcas del habla necesitaban escapar, o cambiar:
.fe:after {content:"<a href='mailto:[email protected]'>[email protected]</a>"; }
Incluso entonces, sin embargo, su contenido simplemente se mostrará como texto estático, en lugar de mostrarse.
No puede agregar html al content en css. A menos que escapes de todo.
Como alternativa, se puede usar jQuery y usar html(), por ejemplo:
Parece que este método imprime la dirección de correo electrónico en la pantalla? Eso no ayudaría con los robots de spam, ¿verdad? ¿O jQuery lo hace para que no pueda leerlo un robot? ¡Gracias! – Tom
Esto podría ser útil a alguien ...
En lugar de insertar el enlace con el css, lo codifiqué en el html con una clase href &, pero lo dejé vacío. De esta manera:
<p>This text is always here.</p>
<a class="mobile" href="mailto:[email protected]"></a>
.mobile:after {
content:'Click here to email us.'
}
De esta manera, el enlace no aparece (alto: 0, ancho: 0) hasta que tenga contenido.
Lo usé para un localizador de tiendas receptivo donde el mapa se apilaba en la parte superior de la lista de ubicaciones en pequeños tamaños de pantalla, necesitando un enlace al ancla de la lista. Lo consideré una decisión de "diseño", que es la única razón justificable para hacerlo.
no se pueden agregar elementos html con los selectores CSS3 ::after o ::before. La propiedad content:"" solo aceptará texto sin formato.
Debe recordar que CSS es sólo para fines de estilo. Esto incluye los selectores ::before y ::after.
Su mejor opción es utilizar una alternativa de JavaScript.
Estoy tratando de bloquear robots de spam para que no puedan leerlo. Tratando de evitar javascript si es posible – Tom
Veo, pero no creo que exista una alternativa con css o html para bloquear el spam en un mailto. Edité mi publicación con algunos javascript si finalmente decides que puedes usarla. – TimPetricola