Elena Fire

Возможно. Прописываете необходимые стили в css и в разметке и пишите в .js все необходимые условия появления.

Как один из вариантов:
background (см. комментарий от Антон)
Как второй из вариантов:
создание вложенного блока в блоке с текстом и
div.text div.line
{position: absolute; bottom: -50%; content: ''; width: 100%; border-bottom: 1 px dashed grey; z-index: 200;}
блок с текстом:
div.text {position: relative; padding-left: 20px; padding-right: 20px; z-index: 100;}

Хороший вопрос. Для меня лично, чем меньше людей будет изучать html/css/js/php, тем больше у меня будет клиентов и полный стэк заказов на годы вперед. Потому что из штанишек контент-менеджера в любой cms (что там wordpress! October CMS, Bitrix, Host CMS - да мало ли монстров в мире веб?!) владелец сайта вырастает очень быстро.
Мой вам совет: не надо изучать. Сразу обращайтесь к профессионалам, съэкономите кучу нервов, времени, сил и денег.

И, да, успехов с Wordpress'ом с кучей плагинов на все случаи жизни!

Через псевдоэлемент при ховере. Этакий изврат.
Через padding для a. Задать левый padding больше остальных, тогда при ховере текст будет попадать на середину. Тоже так себе вариант.
Через text-align: center; у a при ховере. Правда, будет скакать текст при наведении. Может вызвать приступ тошноты.

Главный вопрос: а зачем по центру? Тексты неодинаковые по длине. Значит и вид при применении этого "по центру" будет меняться при проходе по спискам. Это будет УЖАСНО. Ни один юзер это не примет с восторгом - см. выше про тошноту.

1) html4 - html5 - все базовые теги (как минимум)
2) css3 - block, flex, grid, animation, transition, transform, все для текста
3) JavaScript - подключение, слушатели, взаимодействие с DOM, базовые функции
4) Знать стандарты scss/sass.
5) BEM - правила наименования классов в разметке
6) все про style, class, id, data-, приоритеты в стилях
7) умение работать с git (GitHub, Bitbucket, Jira) и репозиториями - для работы в командных проектах
8) навыки коммуникации и ведения переговоров
9) базовые навыки в чтении и составлении технических заданий на верстку (ТЗ)
10) сверстать не менее 5 шаблонов разных типов и найти того, кто проверить и прокомментирует верстку, поправит и подскажет, - ментор или учитель
11) любовь к этой работе

Думаю, мои коллеги добавят еще чего-нибудь. А вот эти 11 пунктов - база для начала работы верстальщиком.

Сразу оговорим несколько исключений при ответе: дизайн не рассматриваем, шрифты не рассматриваем, стили не рассматриваем (думаю, там много чего можно поправить), адаптивность не рассматриваем.
Про верстку:
1. h1 может быть только ОДИН на всю страницу. Здесь их - гораздо больше.
2. куча ненужных контейнеров - в большом контейнере поменьше лежит, в нем еще меньше, потом еще один и еще один в нем на всякий случай, и вот (наконец-то) содержимое. Меньше вложенности - больше порядка.

Чтобы были правильные border, нужно задать размеры тексту. Например, так:

.text {
line-height: 3em; //высота строки, чтобы не задавать лишние padding-top/bottom
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
border-bottom: 1px solid #color;
border-right: 1px solid #color;
}

Flex - поскольку работает на всех без исключения браузерах, даже на IE

.row.row-cols-2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
@media (max-width: 700px) {
.col {flex-direction: row; flex-wrap: wrap;}
}