Как добавить рисунок к внешней ссылке

Чтобы внешние ссылки отличались от внутренних, к ним добавляют небольшой рисунок, так пользователи интуитивно понимают, что они переходят на другой сайт. Рисунки к таким ссылкам можно добавлять как в конце, так и в самом начале.

Пример

Lorem Ipsum
Lorem Ipsum

HTML


<a href="#" class="external-link-start">Lorem Ipsum</a>
<a href="#" class="external-link-end">Lorem Ipsum</a>

CSS


/* Картинка в начале ссылки */
a.external-link-start {
    background: url(image.png) no-repeat 0 50%; /* Параметры картинки */
    padding-left: 25px; /* Расстояние слева */
}
/* Картинка в конце ссылки */
a.external-link-end {
    background: url(image.png) no-repeat 100% 50%; /* Параметры картинки */
    padding-right: 25px; /* Расстояние справа */
}