JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer">
        <div class="footer-menu">
            <div class="list">
                <a href="#">Миссия1</a> 
                <a href="#">Миссия234</a>
                <a href="#">Миссия123123</a>
                <a href="#">Миссия123123123123</a>
            </div>
        </div>
    </div>

SCSS

.footer{
  &-menu {
    .list {
        display: flex;
        flex-direction: column;
        a {
          text-decoration: none;
          border-bottom: 1px solid black;
          padding-bottom: 2px;
          margin-top: 15px;
          color: black;
          transition: all 1s ease-out;
          &:hover {
            color: red;
            border-bottom: 1px solid red;
          }
        }
    }
  }
}