CSS带修饰的首字下沉效果

Question

CSS带修饰的首字下沉效果

3

我正在尝试使用CSS制作一个带有修饰的CSS落款。

p.copy:first-child:first-letter {
  color: black;
  float: left;
  font-style: normal;
  font-weight: 800;
  font-size: 94px;
  line-height: 80px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  margin-right: 10px;
  position: relative;
}

p.copy:first-child:after {
  width: 10px;
  height: 10px;
  background-color: #FA6400;
  position: absolute;
  left: 75px;
  top: 25px;
  content: "";
  display: block;
}

<div>
  <p class="copy">Phasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

示例请查看：

https://jsbin.com/tizexeyaja/edit?html,css,output

问题在于:first-child:after会显示出正方形，由于其绝对定位的原因，无法保证间距的一致性。而且由于首字母下沉字体的宽度不确定，绝对定位也无法奏效。有没有一种方法可以避免使用span将第一个字符包裹起来？

- TWLATL

你能分享一下你想要正方形的屏幕截图吗？ - Temani Afif

我认为它的位置应该以首字宽度为单位来表示。 - raina77ow

无法在:first-letter上使用width，因为每个字符的间距是可变的。例如，“I”的空间比“W”少。 - TWLATL

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您可以考虑使用渐变，通过控制字符在空间内的距离，您将获得与文本一致的间距：

p.copy::first-letter {
  color: black;
  float: left;
  font-style: normal;
  font-weight: 800;
  font-size: 94px;
  line-height: 80px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  margin-right: 10px;
  background:
    linear-gradient(#FA6400,#FA6400) 
    top 5px right 5px /* position */
    /10px 10px /* width height */
    no-repeat;
}

<div>
  <p class="copy">Phasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

<div>
  <p class="copy">Lhasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>

<div>
  <p class="copy">Shasellus vel enim id libero accumsan convallis. Cras egestas ornare condimentum. Aliquam sollicitudin vehicula lacus eget accumsan. Maecenas bibendum, massa et ultricies efficitur, ligula lectus sodales lectus, eget lobortis nibh sapien vitae magna.
    Aliquam in sollicitudin sapien. Phasellus at sem pellentesque, vehicula ligula vel, feugiat magna. Mauris malesuada in nisi a luctus.</p>
</div>