Wie man Pseudoelemente bei Zeilenumbrüchen am Anker festhält [Duplikat] ⇐ CSS

[Guest]

Ich verwende die Box-Shadow-Technik, um einen mehrzeiligen Texthintergrund zu erstellen. Allerdings muss ich auch ein Symbol an den Text anhängen, aber wie kann ich dafür sorgen, dass es beim letzten Wort bleibt, damit es nicht in einer eigenen Zeile endet?
Bearbeiten: Ich weiß, dass dies schon einmal gefragt wurde, aber keine der vorgeschlagenen Lösungen scheint für mich zu funktionieren – wahrscheinlich wegen des Box-Shadow-Texthintergrunds.
Ich habe versucht:

• text-wrap: balance zum hinzufügen Text
• Negativen Rand des Pseudoelements hinzufügen.

Code: Select all

h1 {
display: inline;
background: #f90;
color: #000;
/*   Top and bottom padding */
padding: 10px 0;
line-height: 1.5;
/*   Left and right padding */
box-shadow:
18px 0 0 #f90,
-18px 0 0 #f90;
box-decoration-break: clone;
}

a {
position: relative;
display: inherit;
color: inherit;
text-decoration: none;
padding-right: 20px;
}

a::after {
position: relative;
transform: translate(50%);
content: "";
display: inline-block;
height: 28px;
width: 28px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M15 16l4 -4' /%3E%3Cpath d='M15 8l4 4' /%3E%3C/svg%3E");
mask-position: center center;
mask-repeat: no-repeat;
background-color: #000;
}

/* For demonstration only */
.test-content {
width: 408px;
}

Code: Select all

[url=#]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor odio[/url]