CSS 如何实现分割文本菜单？

Question

CSS 如何实现分割文本菜单？

仓乃文 · Accepted Answer

分割文本菜单在 hover 时将菜单文字上下分割，上半部分向上移出、下半部分从下方移入，产生文字替换的视觉效果。

```css
.split-menu a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.split-menu a::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.split-menu a::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 0;
  height: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.split-menu a:hover::before {
  transform: translateY(-100%);
}

.split-menu a:hover::after {
  transform: translateY(100%);
}
```

补充说明：
- attr(data-text) 读取自定义属性作为伪元素内容
- 上下各 50% 高度 + overflow: hidden 实现文字分割
- hover 时上半向上移出、下半向下移出，原文字位置显示新内容
- 适合导航菜单、标题动画等场景