Евгений Петров

Вполне нормальный вариант. Про DL написано следующее:
«The dl element represents an association list consisting of zero or more name-value groups (a description list).».
И чуть дальше:
«Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.».

Где там строго про термины, на что часто вижу отсылку? Просто ассоциативный лист для любых пар имя-значение. Любых.

А кто это — wrapper?
Если используете самопальные имена тэгов, то напишите хотя бы display для него. Типа такого:

wrapper {
	display: block;
}

jsfiddle.net/r4mef13v/3
Про FF и рамки.

button:active, button:focus {
	outline: none;
}
button::-moz-focus-inner {
	border: 0;
}

Заключить слова в тэги с классом и прописать для класса в CSS стиль.

Просто поменять border-bottom на border-top.

1. Логотип как часть общего спрайта
   
2. Логотип, вставленный фоном, описанным в CSS в виде data:uri (кодировка base64)
   
3. SVG, просто вставленный как элемент в HTML
   
4. SVG, вставленный фоном, описанным в CSS в виде data:uri (кодировка utf-8 или base64)
   
5. Шрифт, укороченный до минимально необходимого набора символов
   
6. Тот же шрифт, используемый в @font-face в виде data:uri (кодировка base64)
   

С рядом допущений примерно так jsfiddle.net/petroveg/heks3aws

1. Фон у пунктов белый — он перекрывает пунктирную линию. Эту линию можно задать и с помощью :before у списка вместо SVG.

2. Для IE9 не писал «CSS-полифилл» в виде inline-block, растягивания и управления размером шрифта. Просто лень.
Update: вот и оно jsfiddle.net/petroveg/heks3aws/1

3. Для IE потребуется перевести фон из utf8 в base64. Тоже не стал.

Теперь насчёт сдвига областей и размеров:
— фон у списка сдвинут от верхней границы на 30 пикселей, что составляет половину высоты иконок
— ровно на такое же расстояние сдвинут :before у элемента списка для формирования стрелки
— у первого и последнего элементов в ссылке :after скорректирован по горизонтали на половину отступа у ссылки

Да пожалуйста — есть flex jsfiddle.net/petroveg/29o2e0u3
Про IE9 и ниже забудьте. Для старых Safari, возможно, придётся применять старый синтаксис.

Никак. Только дополнительный вложенный элемент со своими псевдоэлементами.

Позволить показывать элемент за пределами предка с overflow:hidden невозможно.
А раз селекторы не работают вверх по дереву (пока), то только показывать/скрывать элемент за пределами такого предка. Управляется, конечно, скриптом.

Есть такие события transitionend и animationend.