下划线和上划线菜单悬停效果| CSS 项目
原创下划线和上划线菜单悬停效果| CSS 项目
原创
大家好。欢迎来到今天的教程。在本教程中，我们将学习如何创建一个简单而引人注目的链接悬停效果。要创建此效果，我们需要 HTML 和纯 CSS。不仅本教程速度快，而且非常简单，适合初学者。
项目文件夹结构：
让我们从创建项目文件夹结构开始。我们将项目文件夹命名为“菜单链接悬停效果”。在此文件夹中，我们有两个文件 - index.html 和 style.css。在这里，index.html 是我们的 HTML 文档，style.css 是我们的样式表。
HTML：
我们从 HTML 部分开始。HTML 代码由一个 Nav 元素组成。在这个 Nav 元素中，我们有四个锚点标签。这些锚点标签的 'href' 属性是它们链接到的部分/页面。您可以使用任何您选择的 URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>菜单链接悬停效果</title>
<!-- 谷歌字体 -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- 样式表 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<a href="#home">主页</a>
<a href="#about">关于</a>
<a href="#services">服务</a>
<a href="#contact">联系</a>
</nav>
</body>
</html>CSS：
接下来，我们为这些链接添加样式并添加悬停效果。为此，我们需要 CSS。
我们从所有元素中移除边距和填充。此外，我们将每个元素的 box-sizing 设置为 'border-box'。
接下来，我们为 body 设置背景颜色，并为 nav 设置尺寸。然后，我们使用 flex 布局来居中和间隔 Nav 的内容。
现在对于 'a' 标签，我们将位置设置为相对位置，并将文本装饰设置为无。我们进一步设置了文本样式，并添加了左右填充为 10px。
接下来，我们将 'a:before' 和 'a:after' 伪元素的高度设置为 0。最初，我们将它们的宽度都设置为 0。但是在悬停时，宽度会变为 100%。由于我们将 'a:after' 的 left 属性设置为 0，它似乎是从左侧增长的。而 'a:before' 则似乎是从右侧增长。
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #121317;
}
nav {
height: 100vh;
width: 70vw;
min-width: 600px;
display: flex;
align-items: center;
justify-content: space-around;
margin: auto;
}
a {
position: relative;
text-decoration: none;
font-family: "Poppins", sans-serif;
color: #a0a0a0;
font-size: 18px;
letter-spacing: 0.5px;
padding: 0 10px;
}
a:before,
a:after {
content: "";
position: absolute;
height: 3px;
width: 0;
background-color: #18f08b;
transition: 0.5s;
}
a:after {
left: 0;
bottom: -10px;
}
a:before {
right: 0;
top: -10px;
}
a:hover {
color: #ffffff;
}
a:hover:after,
a:hover:before {
width: 100%;
}我正在参与2023腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。