如何通过CSS ::first-letter实现首字符显示+hover展示完整单词？

首先得指出你代码里最明显的问题：visibility: hiddenx是拼写错误，应该写成visibility: hidden——浏览器会忽略无效的CSS属性，这也是你之前看不到任何效果的核心原因之一。

接下来我们修复代码，同时确保精准实现你要的效果：默认仅显示"TECHNOLOGY"的首字母"T"，鼠标悬停时显示完整单词。

修复后的完整代码 #

HTML

<div class="slide"> 
  <a target="_blank" href="#" class="post-badge btn_six">TECHNOLOGY</a> 
</div>

CSS

.post-badge {
  visibility: hidden; /* 修正拼写错误 */
  font-size: 50px;
  display: inline-block;
}
.post-badge::first-letter {
  visibility: visible;
  display: block;
}
a {
  color: red;
}
.slide {
  height: 50px;
  width: 100%;
  background-color: #f5f5f5;
}
.btn_six:hover {
  visibility: visible; 
  color: green;
  display: inline-block;
}

关键知识点解释 #

1. 修正拼写错误：把hiddenx改成hidden后，visibility属性才能正常生效。父元素整体隐藏后，伪元素可以单独设置visibility: visible来显示首字母——因为visibility是可继承属性，但子元素（包括伪元素）可以覆盖父元素的设置。
2. ::first-letter的生效条件：这个伪元素只能作用于块级元素，或者display值为inline-block、table-cell等的元素，你给.post-badge设置inline-block是正确的，确保伪元素能精准选中首字母。
3. hover效果实现：当鼠标悬停在链接上时，把整个元素的visibility设为visible，就能显示完整的单词，同时调整颜色为绿色，完全匹配你的需求。

更简洁的替代方案（推荐） #

如果你觉得用visibility的方式有点绕，还可以通过颜色透明的方式实现，代码更直观易懂：

.post-badge {
  color: transparent; /* 让除首字母外的文本透明隐藏 */
  font-size: 50px;
  display: inline-block;
}
.post-badge::first-letter {
  color: red; /* 首字母显示红色 */
}
.btn_six:hover {
  color: green; /* hover时整个文本变绿色显示 */
}
.slide {
  height: 50px;
  width: 100%;
  background-color: #f5f5f5;
}

这种方式不需要借助visibility属性，纯通过颜色控制显示/隐藏，效果完全一致，而且代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Learning