<h1 class="padded-multiline">
<span>How do I add padding to subsequent<br>lines of an inline text element?</span>
</h1>
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background: linear-gradient(to right, #c0c, red);
color: #fff;
display: inline;
padding: 0.45rem;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
body {
padding: 1rem;
}
This Pen doesn't use any external CSS resources.