Über die Pseudoelement before bzw. after können Links wie folgt dekoriert werden:
Das Besondere daran ist, dass die Symbole als inline-SVG in der CSS-Datei angegeben werden.
In dem angegebenen Code sind alle SVGs wie im ersten Bild gezeigt dunkelrot. Für eine andere Farbe muss nach %23BB0000 gesucht werden und durch einen anderen Farbcode entsprechend der Linkfarbe der Seite ersetzt werden.
/* -------------------------------- Dekoration des mailto-Links -------------------------------- */
a[href^="mailto:"]::before {
content: '';
width: 1.8em;
height: 1em;
display: inline-block;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='%23BB0000'%3E%3Cpath d='M36.427.157c-8.51.057-17.024-.05-25.533.055-.996.256-1.023 1.477-.917 2.303.063 1.513-.187 3.083.163 4.56.394.71 1.543.876 1.98.112.633-.886.327-2.04.313-3.035 2.06 1.861 4.156 3.684 6.23 5.53-2.08 2.048-4.131 4.124-6.197 6.185-.052-1.62.16-3.274-.125-4.871-.351-.838-1.581-.861-2.086-.156-.492.52-.406 1.275-.289 1.911.037 2.225-.135 4.481.138 6.686.569.934 1.822.682 2.732.689 8.153-.013 16.31.063 24.461-.04.953-.256 1-1.422.905-2.225-.032-5.586.065-11.179-.05-16.76-.17-.764-1.046-.988-1.725-.944zm-.73 2.518v13.182l-6.09-6.09c1.728-1.517 3.575-2.916 5.222-4.52.483-.658.106-1.768-.774-1.796-.832-.152-1.565.4-2.057 1.005l-7.895 6.699-9.577-8.48h21.171zm-15.125 8.693c.866.79 1.743 1.568 2.636 2.325.624.566 1.538.306 2.087-.234.64-.688 1.461-1.152 2.092-1.847.415-.49.732.305 1.05.521 1.82 1.841 3.662 3.662 5.49 5.495h-19.68c2.118-2.078 4.146-4.234 6.325-6.26z'/%3E%3Cpath d='M.921 9.908h13.795c1.723-.464.253-2.061-.93-1.634H.922c-1.068-.011-1.068 1.642 0 1.634zM2.35 5.407h6.194c1.724-.464.254-2.061-.929-1.634H2.351c-1.068-.011-1.069 1.642 0 1.634zM8.475 13.115h-5.99c-1.724.464-.253 2.061.93 1.634h5.06c1.068.011 1.068-1.642 0-1.634z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
margin-right: 5px;
}
/* Trennung zwischen Symbol und Text verhindern */
a[href^="mailto:"] {
white-space: nowrap;
}Sie können Benutzern mobiler Geräte entgegenkommen, wenn Sie Ihre Telefonnummer auf Ihrer Webseite als Link veröffentlichen. Damit können diese Benutzer die Nummer einfach anklicken, anstatt die Nummer eingeben zu müssen.
Telefon-Verweise beginnen immer mit tel: (und ohne // dahinter). Der Verweis ist bei Anwendern nur ausführbar, wenn der Web-Browser das automatische Wählen unterstützt. Es ist sinnvoll, im Verweistext die Telefonnummer noch einmal explizit zu nennen.
Beachten Sie: Fügen Sie immer das Pluszeichen und die internationale Vorwahl hinzu, vergessen Sie nicht, die führende Null der Ortsvorwahl zu entfernen.
/* -------------------------------- Dekoration des tel-Links -------------------------------- */
a[href^="tel:"]:before {
content: '';
width: 1.2em;
height: 1.2em;
display: inline-block;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.999998 39.999998' height='40' width='40'%3E%3Cg fill='%23bb0000' transform='translate(-3.065342 -5.5017811) scale(.08701)'%3E%3Cpath d='M49.669896 465.76156c0-66.40725 16.584974-91.19158 84.994154-109.29853 33.84925 156.78588 226.19792 157.59399 263.02209 0 74.09046 15.96879 79.82633 45.87152 80.67836 110.15809 0 26.25908 6.72735 24.56989-4.61659 50.3928-28.53913 9.99147-104.90387 3.81479-209.4548 3.28025-104.55227-.53454-182.020574 4.66276-209.538312-1.60434 0 0-5.084902-21.35276-5.084902-52.92827zm-15.391822-197.5504c0-59.28208 87.415136-116.12689 222.306296-116.12689 155.50803 0 236.46143 45.95607 237.40358 114.72694.10076 7.36191-5.88775 33.76689-15.86267 39.39361-33.3556 18.81543-105.89919 11.52255-98.36953-21.27024 5.70317-24.83817-55.55767-62.35454-117.85995-63.94098-62.30228-1.58643-125.64599 32.75707-119.83227 53.28345 8.1425 28.74855-64.841362 37.74081-93.823351 34.29162 0 0-13.962105-19.33986-13.962105-40.35715z'/%3E%3Cellipse cx='262.85703' cy='345.87952' rx='72.162773' ry='69.490074'/%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
margin-right: 0.5em;
}
/* Trennung zwischen Symbol und Text verhindern */
a[href^="tel:"] {
white-space: nowrap;
}Fundstelle: https://css-tricks.com/the-current-state-of-telephone-links/
Links, deren Ziel in einem Extra-Browserfenster/-tab angezeigt werden sollen, können mit einem Symbol gekennzeichnet werden. Es gibt aber zwei Besonderheiten:
- Links in der Navigationszeile haben meist eine andere Farbe
- Bei Images, die einen Link beinhalten, ist es meist nicht so schön wenn ein Extrasymbol angezeigt wird.
/* -------------------------------- Dekoration des normalen-(externen)-Links -------------------------------- */
/* -------------------------------- no-link-symbol ist die "CSS-Klasse des Links" für den Image-Link -------- */
li:not(.menu-item) > a[target="_blank"]:not(.menu-item)::after,
p > a[target="_blank"]:not(.no-link-symbol)::after {
content: '';
width: 1em;
height: 1em;
display: inline-block;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23B60A0A' d='M486.553-4.2c-44.367.825-88.813-.673-133.135.766C333.451.35 322.398 27.55 335.771 43.51c7.77 10.545 18.968 17.942 27.038 28.197 2.06 2.467 6.776 4.017 7.06 7.367-80.754 81.184-162.378 161.537-242.635 243.194-10.05 13.753-4.716 34.58 9.123 43.683 10.7 10.31 20.622 25.523 37.065 26.139 13.195.593 23.99-8.615 31.845-18.206L435.34 143.746c13.376 12.455 24.742 27.414 40.006 37.664 17.905 8.967 43.07-5.406 42.429-25.977.708-28.838-.29-57.698.275-86.546-.165-17.092.62-34.351-1.204-51.33C513.222 4.55 499.896-4.58 486.553-4.2zM204.545 59.706c-54.823 1.004-109.701-.544-164.496.777-27.204 3.7-48.873 30.675-46 58.112.169 118.214-.594 236.449.41 354.65 3.147 28.219 31.637 50.112 59.686 46.75 117.959-.332 235.947.717 353.888-.557 27.873-3.556 49.264-31.807 45.95-59.574-.504-42.73 1.127-85.579-.87-128.234-3.362-12.238-17.912-18.013-29.449-15.457-12.874.571-28.46-3.6-39.076 6.027-10.373 10.708-5.749 26.843-6.588 40.022V444H70V135.988c47.95-.434 95.997.963 143.887-.744 12.505-3.089 18.571-17.891 15.941-29.58-.576-12.782 3.546-28.161-5.795-38.814-5.03-5.122-12.45-7.274-19.488-7.145z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
margin-left: 0.4em;
margin-right: 0.3em;
}
/* in der Menüzeile soll das Symbol in einer anderen Farbe (hier weiß) erscheinen */
/* Die Reihenfolge - nach dem normalen externen Link ist wichtig */
.menu-item > a[target="_blank"]::after {
content: '';
width: 1em;
height: 1em;
display: inline-block;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFFFFF' d='M486.553-4.2c-44.367.825-88.813-.673-133.135.766C333.451.35 322.398 27.55 335.771 43.51c7.77 10.545 18.968 17.942 27.038 28.197 2.06 2.467 6.776 4.017 7.06 7.367-80.754 81.184-162.378 161.537-242.635 243.194-10.05 13.753-4.716 34.58 9.123 43.683 10.7 10.31 20.622 25.523 37.065 26.139 13.195.593 23.99-8.615 31.845-18.206L435.34 143.746c13.376 12.455 24.742 27.414 40.006 37.664 17.905 8.967 43.07-5.406 42.429-25.977.708-28.838-.29-57.698.275-86.546-.165-17.092.62-34.351-1.204-51.33C513.222 4.55 499.896-4.58 486.553-4.2zM204.545 59.706c-54.823 1.004-109.701-.544-164.496.777-27.204 3.7-48.873 30.675-46 58.112.169 118.214-.594 236.449.41 354.65 3.147 28.219 31.637 50.112 59.686 46.75 117.959-.332 235.947.717 353.888-.557 27.873-3.556 49.264-31.807 45.95-59.574-.504-42.73 1.127-85.579-.87-128.234-3.362-12.238-17.912-18.013-29.449-15.457-12.874.571-28.46-3.6-39.076 6.027-10.373 10.708-5.749 26.843-6.588 40.022V444H70V135.988c47.95-.434 95.997.963 143.887-.744 12.505-3.089 18.571-17.891 15.941-29.58-.576-12.782 3.546-28.161-5.795-38.814-5.03-5.122-12.45-7.274-19.488-7.145z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
margin-left: 0.5em;
}