* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } /* 移除全局a:hover样式,避免影响社交元素 */ /* a:hover { border-radius: 25px; background: var(--clr); color: var(--clr); letter-spacing: 0.25em; box-shadow: 0 0 35px var(--clr); } */ /* 为非社交元素的链接保留hover效果 */ :not(.social-icons-row) a:hover { border-radius: 25px; background: var(--clr); color: var(--clr); letter-spacing: 0.25em; box-shadow: 0 0 35px var(--clr); } span { position: relative; z-index: 1; } i { position: absolute; inset: 0; display: block; } /* 移除伪元素动画效果,避免影响社交元素 */ /* i::before { content: ''; position: absolute; top: -3.5px; left: 80%; width: 10px; height: 5px; background: #27282c; transform: translateX(-50%); border: 2px solid var(--clr); transition: 0.5s; } a:hover i::before { width: 20px; left: 20%; } */ /* 为非社交元素的伪元素保留效果 */ :not(.social-icons-row) i::before { content: ''; position: absolute; top: -3.5px; left: 80%; width: 10px; height: 5px; background: #27282c; transform: translateX(-50%); border: 2px solid var(--clr); transition: 0.5s; } :not(.social-icons-row) a:hover i::before { width: 20px; left: 20%; } /* 移除伪元素动画效果,避免影响社交元素 */ /* i::after { content: ''; position: absolute; bottom: -3.5px; left: 20%; width: 10px; height: 5px; background: #27282c; transform: translateX(-50%); border: 2px solid var(--clr); transition: 0.5s; } a:hover i::after { width: 20px; left: 80%; } */ /* 为非社交元素的伪元素保留效果 */ :not(.social-icons-row) i::after { content: ''; position: absolute; bottom: -3.5px; left: 20%; width: 10px; height: 5px; background: #27282c; transform: translateX(-50%); border: 2px solid var(--clr); transition: 0.5s; } :not(.social-icons-row) a:hover i::after { width: 20px; left: 80%; }