Dar un estilo distinto al habitual a los enlaces externos de nuestra web es un práctica habitual en muchas páginas web informativas, como por ejemplo Wikipedia. Como usuario, es un placer que un enlace en el cual vas a hacer clic te va a redireccionar hacia una página externa. Muchos sitios hacen el chequeo de los enlaces externos mediante la propiedad "rel=external" o simplemente añadiendo una clase llamada "external" en los enlaces que se dirigen fuera de nuestro sitio web. En muchos otros casos, esto no es posible ni plausible. Después de buscar y buscar muchas soluciones para marcar los enlaces externos solamente mediante Javascript y de ir de un lado para otro, he encontrado un snippet de CSS superútil para ello. Como te he dicho antes, no te hará falta ningún tipo de librería para implementarlo, solamente puro código CSS. El snippet es el siguiente:
/* versión larga */
a[href^="http://"]:not([href*="miweb.com"]),
a[href^="https://"]:not([href*="miweb.com"]),
a[href^="//"]:not([href*="miweb.com"]), {
}
/* versión corta */
a[href*="//"]:not([href*="miweb.com"]) {
/* estilos para los enlaces externos. Puedes usar :before o :after si lo deseas */
}
En primer lugar tienes que chequear el inicio del enlace, y después chequear el dominio de la web, que para este ejemplo hemos puesto como miweb.com. Los enlaces internos no coincidirán con estos parámetros y los enlaces externos se verán afectados por estas comparaciones. Con esto no necesitarás de una librería JS o de añadir un parámetro HTML para dar otro estilo a los enlaces externos, solo haciendo uso de CSS, serás capaz de llevarlo a cabo. Un snippet útil y que debes tener en tu carpeta de códigos de emergencia, para cuando lo necesites.
Y este ha sido el artículo en el que trataba explicaros como combinar audio y video con ffmpeg, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!