Created
May 8, 2025 09:57
-
-
Save nextab/dfc53df9e0cdf95f339b50a2ee5be552 to your computer and use it in GitHub Desktop.
Mit der CSS Klasse "tolle-links" sorgt man dafür, dass ein Icon nach einem Link im Text erscheint, um so dafür zu sorgen, dass auch farbenblinde Menschen kein Problem damit haben, den Link zu identifizieren.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tolle-links a { | |
position: relative; | |
} | |
.tolle-links a::after { | |
content: ""; | |
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-128c0-17.7-14.3-32-32-32L352 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E"); | |
mask-position: center; | |
mask-size: contain; | |
background-color: currentcolor; | |
color: #cd147f; | |
display: inline-block; | |
margin-left: 5px; | |
width: 0.75em; | |
height: 0.75em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment