CSS: текст-украшение не может удалить overline

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

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}
p::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}
<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

ОТВЕТЫ

Ответ 1

Просто добавьте:

p::first-letter {
    float: left;
}

Итак, это:

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}
p::first-letter {
  float: left;
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}
<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Ответ 2

Не уверен, если это подходящее решение для него.

но да, мы можем пропустить текстовое оформление с помощью text-decoration-skip link1, link2, но, похоже, это не очень хорошо подходит.

Я попытался сделать L и остальную часть содержимого отдельными элементами и добавить в него текстовое оформление (я знаю, что это не так), но может помочь вам

div{
  display:flex;
}
p.overline::first-line{
  display:inline-block;
  width:100%;
  font-weight: bold;
 text-decoration:overline;
}

p:first-child::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/

  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}
<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>
<div>
<p >L</p>

  
<p class="overline">orem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>
</div>

Ответ 3

Это немного взломанный, но вы можете легко избавиться от нежелательной надстройки, нарисуя небольшой блок цвета сверху, используя псевдоэлемент ::after.

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}

p::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

p {
position: relative;
}

p::after {
content: '';
display:block;
position:absolute;
top:0;
left:10px;
width: 16px;
height: 8px;
background-color: rgb(122,163,212);
}
<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Ответ 4

Вы можете скрыть это с помощью псевдоселектора, как показано ниже,

p::first-line{
  font-weight: bold;
  text-decoration:overline;
  z-index:-1;
  position:absolute;
}
p::first-letter {
  display: block;
  color: red;
  font-weight: bold;
  padding: 2px 0px 0px 0px;
}
p::before{
  content:'';
  width:10px;
  height:1px;
  background:rgba(250,250,250,1);
  position:absolute;
}
<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>