CSS3 導航欄鼠標懸停展開動畫：偽元素三角形與 overflow 隱藏衝突完美解決

效果預覽

側邊導航欄默認僅顯示圖標，鼠標懸停平滑展開文字標籤，右側三角形指示器同步翻轉。

核心難點

父容器 overflow: hidden 會剪切偽元素 ::after 產生的三角形，導致指示器消失。

解決方案：內層 span 包裹文字 + 獨立動畫

/* HTML 結構 */
<div id="nav">
  <a id="nav-main"><span><i class="icon-home"></i> 主界面</span></a>
  <a id="nav-sum"><span><i class="icon-laptop"></i> 統計界面</span></a>
</div>

/* 關鍵 CSS */
#nav a {
    width: 30px; height: 52px;
    position: relative;
    overflow: hidden;           /* 只裁剪內部 span，不影響 ::after */
}
#nav a span {
    display: inline-block;
    width: 46px; height: 50px;
    overflow: hidden;           /* 文字截斷由這裡控制 */
    transition: width 0.5s;     /* 平滑展開 */
}
#nav a::after {                 /* 三角形附著在 a 上，不受 span overflow 影響 */
    content: ''; position: absolute;
    right: -16px; bottom: 0;
    border: 16px solid transparent;
    border-left-color: inherit; /* 繼承父級背景色 */
}
#nav a:hover { width: 100px; }
#nav a:hover span { width: 116px; }

動畫細節：@keyframes 精細控制

@keyframes extend-a {
    0% { width: 30px; } 100% { width: 100px; }
}
@keyframes extend-span {
    0% { width: 46px; } 100% { width: 116px; }
}
#nav a:hover { animation: extend-a 0.5s forwards; }
#nav a span:hover { animation: extend-span 0.5s forwards; }

圖標引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

關鍵技巧總結

1. 結構分離：三角形掛在 <a> 的 ::after，文字截斷由內層 <span> 的 overflow: hidden 控制，互不干擾
2. 顏色復用：border-left-color: inherit 自動跟隨導航項背景色，無需重複定義
3. 動畫模式：forwards 保持終態，避免閃爍
4. 無 JS 依賴：純 CSS 完成交互，性能極佳