css
:root {
overflow-y: overlay;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 0, 0, 0.2);
border-radius: 10px;
cursor: pointer;
}
::-webkit-scrollbar {
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, .1);
}
<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<nav class="menu_1">
<ul class="flex">
<li><a href="#">내용 1</a></li>
<li><a href="#">내용 22</a></li>
<li><a href="#">내용 333</a></li>
<li><a href="#">내용 4444</a></li>
<li><a href="#">내용 55555</a></li>
</ul>
</nav>
<nav class="menu_2">
<ul class="flex">
<li><a href="#">내용 1</a></li>
<li><a href="#">내용 22</a></li>
<li><a href="#">내용 333</a></li>
<li><a href="#">내용 4444</a></li>
<li><a href="#">내용 55555</a></li>
</ul>
</nav>
<nav class="menu_3">
<ul class="flex">
<li><a href="#"><span>내용 1</span></a></li>
<li><a href="#"><span>내용 22</span></a></li>
<li><a href="#"><span>내용 333</span></a></li>
<li><a href="#"><span>내용 4444</span></a></li>
<li><a href="#"><span>내용 55555</span></a></li>
</ul>
</nav>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 20px;
}
/* 방법1 */
.menu_1 > ul > li > a {
display: block;
padding: 20px;
position: relative;
}
.menu_1 > ul > li > a::after {
content: "";
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 10px;
background-color: red;
}
/* 방법2 */
.menu_2 > ul > li > a {
display: block;
padding: 20px;
position: relative;
}
.menu_2 > ul > li > a::after {
content: "";
position: absolute;
bottom: 0;
left: 20px;
width: calc(100% - 40px);
height: 10px;
background-color: red;
}
/* 방법3 */
.menu_3 > ul > li > a {
display: flex;
padding: 0 20px;
}
.menu_3 > ul > li > a > span {
display: inline-block;
position: relative;
padding: 20px 0;
}
.menu_3 > ul > li > a > span::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background-color: red;
}