html - 显示单词的第一个字符并在悬停时显示完整单词

Question

我想使用 ::first-letter css 属性显示单词的第一个字符，

我已经设置了以下代码笔示例，但对我不起作用，不确定我是否犯了任何错误。

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

CSS

.post-badge {visibility: hiddenx;  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; }

我特意制作了 .post-badge {visibility: hiddenx; 并在末尾加上 x，否则它不会显示任何内容。

我怎样才能解决这个问题，让它只显示 T，当我将鼠标悬停在它上面时，它会显示完整的单词 TECHNOLOGY

https://codepen.io/anon/pen/rpPKvJ

Answer 1

根据 MDN , 和 this w3C wiki首字母伪元素仅支持 CSS 属性的子集。 (来自维基:)

The following properties that apply to ::first-letter pseudo-elements: font properties

‘text-decoration’

‘text-transform’

‘letter-spacing’

‘word-spacing’

‘line-height’

‘float’

‘vertical-align’ (only if ‘float’ is ‘none’)

margin properties

padding properties

border properties

color property

background properties

visibility 属性没有出现在该列表中。

据此，Firefox 似乎符合规范而不是 Chrome。

作为解决方法，请考虑使用 Nenad 的解决方案。