Вот код HTML
<!DOCTYPE html>
<html>
<head>
<title>underline</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row row--stars">
<p class="cell">
<span class="underline underline--stars">Starderline</span>
</p>
</div>
<div class="row row--emoji">
<p class="cell">
<span class="underline underline--emoji">Emojerline</span>
</p>
</div>
<div class="row row--bacon">
<p class="cell">
<span class="underline underline--bacon">Baconderline</span>
</p>
</div>
</div>
</body>
</html>
А вот CSS
a {
color: #000;
text-decoration: none;
}
.underline {
background-repeat: repeat-x;
}
.underline--stars {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg");
background-position: 0 1.06em;
background-size: 10px 9px;
color: #f2f3f8;
}
.underline--emoji {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png");
background-position: 0 1.06em;
background-size: 15px 9px;
color: #e8665f;
}
.underline--bacon {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
background-position: 0 1.06em;
background-size: 28px 9px;
color: #9e4446;
}
По задумке должно появиться подчеркивание из .svg для многострочного текста, но css обрезает их наполовину.
пробовал увеличить расстояние между строками line-hight, текст раздвинулся, а иконки остались обрезанными.
если менять тип display: inline на display: inline-block, то подчеркивание будет только по нижней строчке текста.
Если кто-нибудь понял в чем соль, ответьте пж.
Простой
Средний
