Home CSS :hover to display <hr> only working on the last item; the first two items aren't triggering the :hover

Questions

CSS :hover to display <hr> only working on the last item; the first two items aren't triggering the :hover

January 4, 2022

I am trying to get this line effect to work when a user hovers over a link but for some reason the first two links are skipped. Why are the first two links not triggering the hover pseudo?

hr {
    width: 0%;
    margin: 0;
    padding: 0;
    border-top: 3px solid #6F42C1;
    transition: width 0.9s ease, margin-left 0.9s ease;
}

#test1-button:hover + #menu-line {
    width: 80%;
    margin-left: 0%;
}

#test2-button:hover + #menu-line {
    width: 80%;
    margin-left: 7%;
}

#test3-button:hover + #menu-line {
    width: 80%;
    margin-left: 15%;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<a href"#" id="test1-button">Test 1</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href"#" id="test2-button">Test 2</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href"#" id="test3-button">Test 3</a>
<hr id="menu-line">

</body>
</html>