Максим

Использовать свойства counter-reset и counter-increment для псевдоэлементов вложенного списка.
Жирность, думаю, сами поставите.

Если есть возможность отредактировать svg, то можно обернуть все содержимое в тег <g></g> и для него вызвать метод getBBox, полученные значения можно использовать как viewBox

Альтернативный способ: суммировать BoundingBoxы всех элементов в svg, уже предложили на другом форуме.

Вариант 1: блочный



Вариант 2: более правильный, так как нижние блоки это элемент украшения, и фактически в верстке присутствовать не должны

Сделал пару примеров. Если захотите писать черным цветом, то можно использовать mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:

чтобы линии начинались с конца второй строки и примыкали ко второй строке

Либо вручную разделять на строки и только последней строке добавлять подчеркивание.

В элемент <a> нельзя вкладывать интерактивные элементы (<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>).
Повесьте на вложенный элемент обработчик события click и выполняйте переход средствами JavaScript.

То, о чём Вы спрашиваете, официально называется WAI-ARIA.
Тут можно скачать бесплатно экранного диктора и с помощью него тестировать свои сайты, осуществляя навигацию по ним с помощью табуляции, а так же открывая специальное меню с помощью горячих клавиш (командная кнопка приложения, которую назначите, по умолчанию ins+f7, или f6? Не помню уже точно :-) )

Доклады Вадима Макеева на ютубе:
https://www.youtube.com/watch?v=MWJKwn_gKR4
https://www.youtube.com/watch?v=ssJsjGZE2sc

Если действительно умеете соблюдать семантику, то, скорее всего, Вы уже сделали достаточно.
Рускоязычные ресурсы по доступности:
https://weblind.ru/
specialbank.ru/guide (В данный момент чёт не работает, но должен)
Есть курс, где учат именно этому: https://kurmak.info/
Статья на хабре: https://habr.com/ru/post/40730/ (там внизу есть полезные ссылки)
Тут можно найти информацию по этому вопросу, в том числе перевод статей из первой ссылки англоязычных ресурсов

В подкасте Веб-стандарты упоминается об этом очень часто. Тут можно прослушать все выпуски, а так же покопаться в выпусках и поискать упоминания доступности и статьи про это.

Есть англоязычные ресурсы
Про доступные компоненты: https://inclusive-components.design/ (нажимаете в хроме справа сверху "перевести страницу" и профит)
Есть спецификация: https://www.w3.org/TR/wai-aria-1.1/#usage (аналогично, перевод в браузере и профит)
MDN: https://developer.mozilla.org/en-US/docs/Learn/Acc...

const listTag = 'ul';
const listClass = 'list';
const itemTag = 'li';
const itemClass = 'item';
const activeClass = 'active';

Вариант раз - перебираем все элементы списка, каждому переключаем класс в зависимости от его равенства кликнутому:

const list = document.createElement(listTag);
const items = arr.map(function(n) {
  const item = document.createElement(itemTag);
  item.textContent = n.text;
  item.classList.add(itemClass);
  item.addEventListener('click', this);
  return item;
}, function() {
  list.style.setProperty('background-image', `url(${arr[items.indexOf(this)].url})`);
  items.forEach(n => n.classList.toggle(activeClass, n === this));
});

list.classList.add(listClass);
list.append(...items);
document.body.append(list);

items[0].click();

Вариант два - ищем внутри списка элемент с классом, удаляем у него класс, добавляем класс кликнутому элементу:

document.body.insertAdjacentHTML('beforeend', `
  <${listTag} class="${listClass}">${arr.map(({ url, text }) => `
    <${itemTag} class="${itemClass}" data-url="${url}">${text}</${itemTag}>`).join``}
  </${listTag}>
`);

const list = document.body.lastElementChild;

list.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(`${itemTag}.${itemClass}`)) {
    list.style.backgroundImage = `url(${t.dataset.url})`;
    list.querySelector(`.${activeClass}`)?.classList.remove(activeClass);
    t.classList.add(activeClass);
  }
});

list.children[0].dispatchEvent(new Event('click', { bubbles: true }));

https://codepen.io/MalemScha/pen/NamYYM

Не совсем понятно, но предположу jsBin:

<form>
  <div class="form-group">
    <input type="text" name="name" class="form-control" placeholder="Your Name">
  </div>
  
  <button type="submit"><span>Submit</span></button>
</form>

* {
  box-sizing: border-box;
}

.form-group {
  position: relative;
  background: #fff;  
}

.form-control {
  width: 100%;
  height: 2.5rem;
  background: transparent;
  border: none;
}

button {
  border:none;
  background: transparent;
  position: relative;
  padding: 1rem 2rem;
}

button span {
  position: relative;
  z-index: 3;
}

button:after,
.form-group:after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  background: linear-gradient(0deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%);
  
  z-index: -1;
  -webkit-animation: animatedgradient 1s ease alternate infinite;
          animation: animatedgradient 1s ease alternate infinite;
  
  background-size: 100% 200%;
  background-position: 0 100%;
}


@-webkit-keyframes animatedgradient {
  100% {
      background-position: 0 0;
  }
}


@keyframes animatedgradient {
  100% {
    background-position: 0 0;
  }
}

В чем он не стандартный то? Можно при помощи https://developer.mozilla.org/ru/docs/Web/CSS/clip-path, можно псевдоэлемент повернуть и скрыть края блока

По разному можно) делаешь круг, позиционируешь как удобнее внутри него второй круг и анимируешь через transition или animation

Со стороны стилей это сложным не выглядит, кмк - делал подобное без CSS-фреймворков.

Но судя по интерфейсу - тут много интерактивных динамичных элементов, так что я бы последовал совету Много Чего и сразу взял какой-нибудь js фреймворк для создания SPA.
Например react, angular, или vue

ну вариантов несколько.
Первый - искать сразу элементы с нужным значением

let name1 = document.querySelectorAll('.js-filter-wrap a[data-filter="box1"]')

Второй - проверять в цикле item.dataset && item.dataset.filter === 'box1'

if (item.getAttribute('data-filter') === 'box1') {

Если заранее известно только значение атрибута:

const element = document.querySelector(`.js-filter-wrap a[data-filter="${конкретноеЗначение}"]`);
if (element) {
  ...

Или, если уже есть коллекция элементов, в которой надо найти подходящий:

const element = [...elements].find(n => n.dataset.filter === конкретноеЗначение);
if (element) {
  ...