עיצוב תגיות a לפי סוג הקישור

קוד זה מכוון לשיפור חווית המשתמש. לא מעט פעמים אנו נתקלים במצב בו אנו לוחצים על קישורים אשר איננו יודעים לאן הם מובילים. קוד זה יכול לשפר את חווית המשתמש על ידי הוספת אייקונים קטנים ליד הקישור ולהראות לגולש כי זהו לינק חיצוני – אימייל / קובץ pdf / תמונה וכו׳…

/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

תגובות פייסבוק

{ 0 תגובות… הוסף אחת }

השאירו תגובה