css导航点击时的正方形 |css 条纹

nav {
display: flex;
justify-content: center;
align-items: center;
}
nav a {
position: relative;
padding: 10px 20px;
margin-right: 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
nav a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
background: rgba(255, 255, 255, 0);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(255, 255, 255, 0.7);
transition: all 0.2s ease-in-out;
}
nav a:hover::before {
width: calc(100% - 20px);
height: calc(100% - 20px);
background: rgba(255, 255, 255, 0.7);
border-radius: 4px;
}

上面的代码使用了伪元素`::before`来实现导航点击时正方形出现的效果。它的基本原理是在链接文字下面添加一个没有内容的伪元素，在鼠标悬停时，通过改变伪元素的宽高、颜色和边框属性等，来实现正方形的出现和消失。

在CSS中，大家可以使用`transform`属性来处理元素的位置、大小和旋转等效果。这里使用`translateX`函数来处理伪元素的位置，用`calc`函数来计算伪元素的宽高。同时，使用`border`属性来设置伪元素的边框样式，利用`border-left`属性来设置伪元素的正方形侧边的颜色。

当然，以上是实现点击出现正方形的基本方法，具体效果还需要根据实际需求来调整。比如，可以通过改变伪元素的背景色、动画时间和过渡效果等来实现导航点击时更多样化的交互效果。