Left hanging label

Useful when you want to highlight the label

by Ovi Stof

HTML

<!-- https://www.thesitewizard.com/css/hanging-indents.shtml-->
<p class="label">Duis semper nisi vitae fermentum gravida. Mauris in elementum dui. Praesent et leo massa. Vivamus justo mauris, molestie in metus eu, suscipit pretium ipsum. In finibus dignissim lobortis. Donec eu felis sollicitudin, sollicitudin erat id, lobortis dolor. Mauris volutpat eros sed risus iaculis eleifend.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vel libero eget sem consequat ullamcorper eu vitae metus. Nunc maximus, elit non pellentesque ornare, erat eros aliquet magna, ac ultricies ex dolor non dolor. Nam et est vulputate, dignissim elit id, congue eros. Morbi pulvinar, augue eget eleifend dignissim, est nisi vestibulum diam, commodo volutpat massa tellus sit amet magna. Morbi aliquet non neque ultrices euismod. Donec posuere venenatis nunc nec dictum. Sed faucibus euismod ipsum, sit amet dapibus magna. Sed lacus ante, sollicitudin in eros et, volutpat rhoncus massa. Integer at risus ac odio pellentesque euismod. Donec imperdiet vehicula scelerisque. Nulla hendrerit est arcu, eu fermentum nulla ultrices et. Vestibulum neque augue, mattis ac porta sed, ultrices nec massa. Quisque sodales in tellus ut vulputate. Nulla eu mi tincidunt, pretium mauris sollicitudin, mollis tellus.</p>

<p class="label">Integer aliquet lorem urna, in finibus lacus consequat in. In ut metus erat. Maecenas ac lacinia erat. Nam dignissim tincidunt velit, sit amet dignissim justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet rhoncus ante. Quisque tempor turpis augue, eu mollis elit viverra eget. Aenean at felis nec eros tincidunt scelerisque non vitae nisi. Nullam sit amet ipsum vulputate quam lobortis sodales. Morbi sagittis, tortor sed aliquam fermentum, ex magna elementum massa, non blandit nibh lorem eget magna. In faucibus nulla nec laoreet porta. Curabitur est est, gravida id...

CSS

.label {color:gray;font-size:1em;margin:0 12px;padding:0; border-top:1px dotted dodgerblue;border-bottom:1px dotted dodgerblue;line-height:1;padding-left: 60px ;
  text-indent: -60px ;text-align:justify;}
.label:before {
	content:'CSS'; 
	display: inline-block;
	padding:1px 1px 1px 55px;
	margin:3px;
	background-color: dodgerblue;
	color: white;
	text-align: center;

	text-decoration: none;
	border-radius: 5px;
  }