CSS: Style de liens externes
Je veux le style de tous les liens externes dans mon site web (WordPress). Je suis en train d'essayer avec:
.post p a[href^="http://"]:after
Mais WordPress de mettre l'url en entier en cliquant sur les liens " Alors, comment ai-je pu le style de tous les liens qui ne commence pas avec http://www.mywebsite.com ?
Merci.
Vous devez vous connecter pour publier un commentaire.
L'aide spéciale à la syntaxe CSS, vous pouvez facilement faire cela. En voici une qui devrait travailler à la fois pour les protocoles HTTP et HTTPS:
Vous pouvez voir un exemple de cela en cliquant sur ici.
De cette façon montre les liens externes ALA Wikipédia:
Un exemple peut être trouvé ici: http://jsfiddle.net/ZkbKp/
J'ai combiné @superlogical + @Shaz de faire quelque chose pour ma Fondation thème WP...
Vous pouvez utiliser ce fragment de code HTML pour le tester sur votre site:
C'est ce que j'ai utilisé pour une image personnalisée (comme un favicon)
Une règle simple, pas de coder en dur impliqués:
Fonctionne pour tous les régimes. Il a l'avantage supplémentaire de identifing tapé des Url internes. Pour masqué interne des liens redirigeant l'extérieur, il suffit de préfixe de l'URL relative avec
//
.De crédit va à la Marque Battistella qui à gauche de cet extrait sur CSS-Tricks en 2012.
Mise à jour: Basé sur utilisation réelle j'ai personnellement trouvé au-dessus de la problématique, car il les styles de tous les liens absolus qui peuvent aboutir à des styles dans certaines situations (par exemple, En Brave, lorsque vous téléchargez une page pour une consultation hors ligne). Ma suggestion est d'utiliser
a[rel*="external"]::after
au lieu et décorer vos liens externes.a[rel=external]
.Supposons que vous définissez la cible pour les liens externes par
<a href='http://' target='_blank'>Justin Bieber Fan Club</a>
Vous pouvez faire jouer:
CSS:
Pseudo-éléments ont un ':: "au lieu de": "dans la syntaxe.
Il est également à seulement un besoin pour correspondre à une URL commençant par "http" au lieu de "http://" ou " https://'.
Donc je ne suis pas sûr que l'on a accepté la réponse et les autres nominale réponses sont techniquement correctes.
Pour inclure un joli icône, vous pouvez placer un SVG dans un CSS variable et ensuite l'utiliser dans votre règle CSS.
Qui semble délicat, mais il s'agit d'un pur lien externe icône qui peut être modifié en fonction de votre thème, sans avoir à revenir à une application de pao. Parce que l'icône est la partie de la feuille de style, vous n'avez pas à avoir le navigateur de faire un supplémentaire de téléchargement pour elle. Aussi parce qu'il est le SVG est est croustillant. Le 'rect' est la boîte, le groupe de avec la "ligne" et "polygone" est la flèche. Tous les nombres sont des entiers, et vous pouvez les ajuster si vous voulez.
Puis dans votre règle, vous pouvez le référencer comme suit:
De la correspondance liens sont ceux qui commencent par http et de ne pas inclure votre nom de domaine. 'Http://et https://' commencer par "http", donc il est inutile de dupliquer la règle, comme par le a accepté de répondre.
Si vous utilisez le protocole de moins de liens dans votre contenu qui commencent par"//", puis ce sera ont besoin d'être pris en compte.
Vous pouvez également être strict sur la façon dont vous ouvrir les liens externes. Par exemple, vous pouvez toujours ouvrir le lien dans un nouvel onglet avec le target blank approche. Pour ce faire correctement, vous devez inclure
target="_blank"
ainsi quedans vos liens. Par conséquent, à l'endroit où ce n'est pas présente dans votre balisage vous souhaitez cibler uniquement les liens qui ont la bonne 'rel' attributs.