CSS Drop Cap с украшением

Я пытаюсь получить буквицу 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, который отображает квадрат, не расположен последовательно, потому что он абсолютно позиционирован. И абсолютно позиционирование не будет работать из-за переменной ширины символов для заглавных букв. Есть ли способ сделать это без переноса первого символа в промежутке?

Всего 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>


Есть идеи?

10000