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 ，当我将鼠标悬停在它上面时，它会显示技术

这个词

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

Answer 1

根据MDN和this w3C wiki，第一个字母的伪元素仅支持CSS属性的子集。（来自维基：）

以下适用于:: first-letter伪元素的属性：   字体属性

“文字修饰”

“文本变换”

“字母间距”

“字间距”

“行高”

“浮动”

'vertical-align'（仅当'float'为'none'时）

保证金属性

填充属性

边界属性

颜色属性

背景属性

可见性属性不会出现在该列表中。

根据这一点，Firefox似乎是根据规范，而不是Chrome。

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

Answer 2

您可以在悬停时更改visibility，而不是更改font-size。

＆＃13;

.post-badge {
  font-size: 0;
  display: inline-block;
  color: red;
  text-decoration: none;
  transition: font-size 0.3s ease-in;
  line-height: 1;
}
.post-badge::first-letter {
  font-size: 50px;
}
.slide {
  height: 50px;
  width: 100%;
  background-color: #f5f5f5;
}
.btn_six:hover {
  visibility: visible;
  font-size: 50px;
  color: green;
}

＆＃13;

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

＆＃13;

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

2 个答案: