如何创建类似于此图像的 hover/active link？

Question

伙计们需要你的帮助 我正在创建一个带有悬停和活动 link 的菜单列表，类似于下图。我需要在 link.

下面创建一个渐变圆

这是一张示例图片，以便更好地理解。

这是我的代码：

header, ul {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: cornsilk;
}
ul {
    height: 80px;
}
li {
    list-style-type: none;
    padding: 0 18px;
}
header a {
    font-size: 14px;
    color: #555555;
    text-decoration: none;
}
header a:hover {
    color: #EB6060;
}
.active {
    color: #EB6060;
}

<header>
    <div class="menu">
        <ul>
            <li>
                <a class="active" href="menu1.html">Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
            </li>
            <li>
                <a href="#">Menu 3</a>
            </li>
            <li>
                <a href="#">Menu 4</a>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>
        </ul>
    </div>
</header>

Answer 1

图片看不清楚，估计线性渐变效果就够了

header, ul {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: cornsilk;
}
ul {
    height: 80px;
}
li {
    list-style-type: none;
    padding: 0 18px;
}
header a {
    font-size: 14px;
    color: #555555;
    text-decoration: none;
    position: relative;
}
header a:hover {
    color: #EB6060;
}
.active {
    color: #EB6060;
}

header a:hover::after,
.active::after {
  position: absolute;
  content: "";
  top: 1.4em;
  left: calc(50% - .3em);
  width: .6em;
  height: 0.6em;
  background-image: linear-gradient(45deg, rgb(230, 100, 101), rgb(145, 152, 229));
  border-radius: 50%;
  box-shadow: 1px 1px 5px 0px #ccc;
}

<header>
    <div class="menu">
        <ul>
            <li>
                <a class="active" href="menu1.html">Menu 1</a>
            </li>
            <li>
                <a href="#">Menu 2</a>
            </li>
            <li>
                <a href="#">Menu 3</a>
            </li>
            <li>
                <a href="#">Menu 4</a>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>
        </ul>
    </div>
</header>

如何创建类似于此图像的 hover/active link？

How to create hover/active link similar to this image?

html

css

menu

header

flexbox