A Pen by Keith.

CSS-Line-break---Color-Control.markdown

CSS Line break - Color Control

Hoping to find a easy multi use CSS line break method for Inline text to wrap with padding. This is a combination of the box-shadow and border-left method , such case that box-shadow does not work I still have left padding. Small price to pay. Multi Line Text - CSS Tricks

A Pen by Keith on CodePen.

License.

index.html

<header>
   <div class="heading-break red-heading">
     <h2>Together we could save the world, but should we</h2>
   </div>
</header

style.css

header{
  width:354px;
  margin:0 auto;
}
.red-heading h2{
	color:#fff;
	background:#A8161B;
 }
.heading-break.red-heading {
	border-left:1.2em solid #A8161B;
 }
.heading-break{
  overflow:hidden;
	padding:0.2em 0.2em 0.25em 0;
	margin-bottom:1em;
	
}
.heading-break h2{
  white-space: pre-wrap;
	display:inline;
	line-height:1.6em;
  padding:0.4em 0.4em 0.4em 0;
  box-shadow:0.5em 0 0 #A8161B;
  }