Я изучаю html и css всего один день, поэтому моих знаний явно не хватает, чтобы уверенно использовать синтаксис. В скриншоте показано как должно получиться
.list {
display: flex;
justify-content: space-between;
margin: 0 250px 10px 250px;
}
.menu__list {
position: relative;
font-weight: 700;
font-size: 12px;
color: #000;
text-transform: uppercase;
user-select: none;
cursor: pointer;
}
.menu__list:after {
content: " ";
display: none;
position: absolute;
height: 2px;
width: 100%;
background: #985e5b;;
transition: .0s linear;
top: 28px;
}
.menu__list:active:after {
display: block;
}
.menu__list:active {
color: #985e5b;
}
<div class="list">
<a class="menu__list">breakfast</a>
<a class="menu__list">lunch</a>
<a class="menu__list">drinks</a>
<a class="menu__list">desserts</a>
</div>