Как создать стилизованную ссылку с помощью CSS?

Для стилизации ссылок с помощью CSS вы можете использовать псевдоклассы, такие как `:link`, `:visited`, `:hover`, и `:active` для определения стилей в различных состояниях ссылки.

Пример стилизованной ссылки в CSS:
```css
a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: yellow;
}

/* Применяем класс для специальной стилизации ссылки */
.custom-link {
  font-weight: bold;
  font-size: 16px;
}
```

HTML:
```html
<a href="https://www.example.com" class="custom-link">Visit Example.com</a>
```

Что касается сайд-бара, основываясь на шаблоне, представленном на CodePen, вам нужно будет обернуть элементы сайд-бара в теги `<a>` для создания активных ссылок. Чтобы сохранить внешний вид, вам придется убедиться, что стили для этих `<a>` тегов соответствуют стилям, которые уже были применены к элементам.

Ниже пример того, как можно изменить HTML элементы сайд-бара, чтобы сделать их ссылками:

HTML (исходный):
```html
<div class="sidebar-icon">
  <i class="fas fa-home"></i>
</div>
```

HTML (модифицированный с ссылкой):
```html
<a href="your-link-here.html" class="sidebar-icon-link">
  <div class="sidebar-icon">
    <i class="fas fa-home"></i>
  </div>
</a>
```

CSS (опционально, если нужен дополнительный стиль для ссылок):
```css
.sidebar-icon-link {
  color: inherit; /* наследовать цвет текста */
  text-decoration: none; /* убрать подчёркивание */
  display: flex; /* сохранить свойства flex, если они были в .sidebar-icon */
}

.sidebar-icon-link:hover {
  /* стили для состояния наведения, если нужны */
}
```

Убедитесь, что у вас правильно настроены стили для `.sidebar-icon` и для `<a>` тегов в CSS, чтобы они совпадали и не конфликтовали друг с другом. Работоспособность сайд-бара в контексте переходов по ссылкам будет обеспечена посредством указания соответствующего `href` в теге `<a>`.

Помните проверить ваш код после каждого изменения, чтобы убедиться, что все работает как ожидалось, и что внешний вид ссылок соответствует вашему дизайну сайд-бара.

Можно через обработку событий яваскриптом. 
 

Нужно помнить, что у тега a и button по умолчанию поведение display: inline - строчные элементы. 
 Если хотите, чтобы они служили там, где используются блочные элементы (display: block) и блочно-строчные (display: inline-block), как div в вашем примере. Так обеспечьте их этим свойством - указав его явно. 
 Зная это, можно спокойно заменить div на a и решить вашу проблему.

Так вам пойдет?