Как сделать псевдо -элементный приклад ⇐ CSS

[Anonymous]

Я использую Box-Shadow Tecknique, чтобы создать многострочный текстовый фон. Тем не менее, мне также нужно добавить значок в текст, но как я могу сделать его придерживаться последнего слова, чтобы оно не оказалось в собственной линии? < /P>
РЕДАКТИРОВАТЬ: Я знаю, что это было задано ранее, но ни одно из предложенных решений, кажется, не работает для меня - вероятно, из -за фона с ножом ..
Я попробовал:

Добавление Text-wrap: баланс в текст < /li>
Добавление отрицательной маржи псевдо-элемента. < /li>
< / / ul>

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

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>


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

Я также пытался комментировать отображение: inline block и добавление Какой -то фиктивный контент, как контент: «фальшивый» < /code> Но я не уверен, почему он мне все еще не нравится: < /p>

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

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: "bogus";
/*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>


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

< /code>
< /div>
< /div>
< /p>
plus, придерживаясь добавления отрицательного маржи, как предполагалось, когда вопрос был изначально закрыт Как дубликат этого, стрелка на самом деле придерживается последнего слова, но я не уверен, почему она все еще не нравится: < /p>


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;
/*----------------------------------------*/
margin-right: -24px;
/*----------------------------------------*/
}

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


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

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