درود

1- بله باید جدا از لیست تعریف کنید، هر دو رو در یک div بگذارید و بهش الاین راست رو اعمال کنید.

2- اون سایت آخر هیچجوره بالا نمیاد برای همین نمیدونم منظورتون چیه. اما کدپنی که فرستاده بودید رو دیدم، اینو جلوتر در بحثهای پیشرفته باهاش آشنا میشید. اما روی کد زیر اگر بخوام یه توضیح کوتاه بدم، عملا با before و after داره کار میکنه و دقت کنید که چون از li استفاده نکرده آزادی عمل بیشتری در ست کردن فاصله خط و... داره.

ul a {
    margin: 10px 30px;
    position: relative;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
  }
 ul a:before {
      position: absolute;
      bottom: -2px;
      content: '';
      width: 100%;
      height: 3px;
      background: red;
      transform: translateX(-100%);
      opacity: 0;
    }
ul a:hover {
      &:before {
        opacity: 1;
        transition: 0.5s transform ease, 0.8s opacity ease;
        transform: translateX(0);
      }
    }