Как создать «плавающую» буквицу, не используя плавающую букву или букву?

Question

Как создать «плавающий» колпачок, подобный этому, без использования float или initial-letter?

Пока единственные решенияЯ получил от Google, чтобы использовать float или initial-letter, но ни то, ни другое.float затрудняет выделение заглушки для копирования, поскольку ::first-letter удаляется из потока документов, в то время как initial-letter является экспериментальным и поэтому в настоящее время непригодным для использования.

Answer 1

Я бы использовал :first-letter, чтобы просто спрятать первую букву, чтобы мы могли ее выбрать, а затем вы можете рассмотреть псевдоэлемент с атрибутом данных для создания перетаскиваемой карты.

Вот пример, где вы можете выбратьвесь текст, и вы также получите L:

.drop-card:before {
  content:attr(data-l);
  float:left;
  font-size:1.9em;
  margin-right:5px;
}
.drop-card:first-letter {
   font-size:0;
}

<p class="drop-card" data-l="L">
Lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</p>

Вот еще одна идея, где вы можете заключить свой элемент в промежуток, который вы поместите над плавающим элементом:

.drop-card:before {
  content:attr(data-l);
  opacity:0;
  float:left;
  font-size:1.9em;
  margin-right:5px;
}

.drop-card {
  position:relative;
}
.drop-card span {
  position:absolute;
  top:0;
  left:0;
  font-size:1.9em;
}

<p class="drop-card" data-l="L">
<span>L</span>orem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
</p>