带点缀的 CSS 首字下沉

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 的间距不一致，因为它是绝对定位的。由于首字下沉字符的可变宽度，绝对定位将不起作用。有没有办法在不将第一个字符包装在跨度中的情况下执行此操作？

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>