Как заставить псевдоэлемент привязываться к привязке во время разрыва строки [дубликат] ⇐ CSS

[Anonymous]

Я использую технику box-shadow для создания многострочного текстового фона. Однако мне также нужно добавить значок к тексту, но как я могу сделать так, чтобы он прикреплялся к последнему слову, чтобы он не попадал в отдельную строку?
Изменить: я знаю, что об этом спрашивали раньше, но ни одно из предложенных решений, похоже, не работает для меня - возможно, из-за текстового фона box-shadow.
Я пробовал:

• Добавление переноса текста: баланс в text
• Добавление отрицательного поля псевдоэлемента.

Код: Выделить всё

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;
}

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/793 ... ine-breaks