使用CSS隐藏除第一个字母以外的所有文本？

Question

是否可以用CSS隐藏第一个字母后面的所有字母？

dt:not(::first-letter) {
  display: none;
}

Answer 1

你可以,但你的CSS错了.以下版本有效(至少在Chrome中).它使dt隐形,并定义第一个字母的否定,使其再次可见.

我也尝试了同样的方法display,但是这不起作用,正如预期的那样.visibility: hidden隐藏内容,但保持元素就位,同时display: none将其从流中移除,并使子元素(在这种情况下的第一个字母)不可能再次可见.

我也添加了一个悬停,所以你可以将信件悬停在dt的其余部分.

dt {
  visibility: hidden;
}
dt::first-letter {
  visibility: visible;
}

/* Hover the first letter to see the rest */
dt:hover {
  visibility: visible;
}

Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

副作用是仍然声称文本覆盖的区域.也许这不是问题,但如果是,你将需要一些其他的解决方案.一种可能性是制作字体大小dt 0.这样,文本很小,声称没有空间.当然,如果它还包含图像,也无济于事.

由于它似乎不起作用,这里是使用font-size的替代方法.不太理想,但希望它仍然可以解决你的问题.

dt {
  font-size: 0;
}
dt::first-letter {
  font-size: 1rem;
}

/* Hover the first letter to see the rest */
dt:hover {
  font-size: 1em;
}

Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>

Answer 2

我想你可以试试这个:

.twitter{
      display: block;
      color: transparent;
    }

    .twitter:first-letter{
      color: #000;
    }

 <div id="socialMedia">
    <a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
    <a class="twitter">Google</a>
</div>

另见这个小提琴

Answer 3

你不能使用:not伪元素选择器(见这个).

你能做的就是以另一种方式思考:透明化整个事物,然后用颜色::first-letter.因为后者具有更高的特异性,它将覆盖透明设置,从而实现您想要的结果.