Привязываем иконку к каждому типу файлов с помощью CSS

В этом примере я покажу как используя псевдоэлемент ::before можно привязать картинку к ссылке по типу файла.

HTML:

<div class="container">
    <div class="row">
    	<div class="col">
        <p><a href="https://tjan.ru">внешняя ссылка</a></p>
        <p><a href="https://mysite.ru">внутренняя ссылка</a></p>
        <p><a href="mailto:mail@gmail.com">почта</a></p>
        <p><a href="tel:223322">телефон</a></p>
        <p><a href="file.pdf">файл pdf</a></p>
    	</div>
      <div class="col">
        <p><a href="file.docx">файл word</a></p>
    		<p><a href="file.xlsx">файл excel</a></p>
        <p><a href="file.pptx">файл power point</a></p>
        <p><a href="file.7zip">архив</a></p>
      </div>
    </div>
</div>

CSS:

a::before {
  margin-right: .5em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
a[href $='.pdf']::before {
  content: "\f1c1";
}
a[href $='.xls']::before, a[href $='.xlsx']::before {
  content: "\f1c3";
}
a[href $='.doc']::before, a[href $='.docx']::before {
  content: "\f1c2";
}
a[href $='.ppt']::before, a[href $='.pptx']::before {
  content: "\f1c4";
}
a[href $='.zip']::before, a[href $='.rar']::before, a[href $='.7zip']::before {
  content: "\f1c6";
}
a[href ^='mailto:']::before {
  content: "\f0e0";
}
a[href ^='tel:']::before {
  content: "\f87b";
}
	a[href ^='http:']:not([href*="mysite.ru"])::before, a[href ^='https:']:not([href*="mysite.ru"])::before {
  content: "\f35d";
}

В данном примере используется библиотека иконок Font Awesome

Немного пояснений:

Если ссылка на файл Microsoft Word с расширением .doc или .docx, то ему автоматически добавляется вот такая иконка , а если это какой-либо архивный файл, то к нему прилепится это

Принцип тут такой. В файле CSS прописываются несколько дополнительных правил для ссылок. Но не просто так, а с добавлением операторов ^ и $. Первый означает «старт с», то есть показывает, с какой песни начинается пьянка. Например, такая запись: a[href^="http://"] означает, что данный набор правил будет относиться ко всем ссылкам, начинающимся с префикса http. Нам остается только задать нужную иконку. Вот полный код этого набора правил:

a[href ^='http:']::before {
  content: "\f35d";
}

Этот код означает, что для всех внешних ссылок, начинающихся с префикса http, будет добавлена иконка .

Другой оператор — $ означает «закончить с». Следующая запись: a[href $='.zip'] означает, что если ссылка заканчивается именем файла с расширением .zip, то данный набор правил будет работать для всех архивных файлов с таким расширением, и к такой ссылке будет прилеплена соответствующая картинка.

a[href ^='http:']:not([href*="mysite.ru"])::before, a[href ^='https:']:not([href*="mysite.ru"])::before {
  content: "\f35d";
}

Поясним, что тут и зачем. Когда в тексте появляется внешняя ссылка с префиксом http://, то данный код сразу за ссылкой при помощи ::before подставляет в строку картинку .

При этом исключается наш собственный домен — :not([href*="mysite.ru"]). Таким образом, если вы ссылаетесь на чужой сайт, то стрелка появляется, а если на страницы собственного, то нет.