:after или :before
У кнопки позиционирование relative, у :after (или :before) - absolute
Устанавливаете left: 0 и bottom: 0
width: 20px, например
При наведении через :hover устанавливаете width: 100%

transition: 1s width - чтобы плавно было

const filtered = obj.people.filter((p) => {
  for (let el of arr) {
    if (el.menId === p.data.menId && el.firstName === p.data.firstName) {
      return true
    }
  }
  return false
})

https://jsfiddle.net/xa6d2cvb/5/

Или, если нет подложки, то вешать обработчик клика на контенте, когда появляется модальное окно

Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствами
position: absolute; left: N; top: N; - чтобы убрать ее за пределы экрана
transform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)
transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экрана

window.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}

Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.