Как сделать специфическую подложку текста, как на картинке, не меняя HTML, то есть, чтобы текст был одним тегом без переносов?
Вот что у меня получилось, но правильно работает только в хроме. в мозилле и сафари глючит
.blog__title{
width: 220px;
}
.blog__title a {
color: #004ec8;
background: #f7e568;
font-size: 17px;
font-weight: 700;
display: inline;
padding: 2px 5px 4px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
position: relative;
text-decoration: none;
line-height: 28px;
}
.blog__title a:after {
content: "";
width: 35px;
height: 25px;
background: linear-gradient(135deg, #f7e568 50%, transparent 50%);
display: inherit;
float: right;
position: absolute;
right: -32px;
left: inherit;
bottom: 0px;
}
<div class="blog__title">
<a href="#">Дежурство скорой помощи на мероприятиях</a>
</div>