Теперь добавим дополнительные классы arrow-up и arrow-down, которые будут обозначать направление стрелки вверх и вниз.

Для стрелки вверх нужно будет убрать верхнюю рамку у псевдоэлемента, а у стрелки вниз — нижнюю рамку. Чтобы стрелки вели себя в потоке, как текст, зададим псевдоэлементам блочно-строчный тип.

И последним шагом скроем текст подписи у ссылки, для этого просто зададим нулевой размер шрифта.

Есть и более сложный вариант стрелок для сортировки: когда у каждого параметра создаются сразу две стрелки. Этот вариант делается схожим образом, но для создания стрелок используются оба псевдоэлемента: и ::before, и ::after.