css - 带装饰的 CSS Drop Cap

Question

我正在尝试获得一个带有 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 的间距不一致，因为它是绝对定位的。由于首字下沉字符的宽度可变，因此绝对定位不起作用。有没有办法在不将第一个字符包装在跨度中的情况下做到这一点？

标签： css

Answer 1

您可以考虑使用渐变来控制字符占用空间内的距离，并且您将拥有与文本一致的空间：

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>