CSS实现Github标签样式

.github-badge {
	display: inline-block;
	border-radius: 4px;
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	line-height: 15px;
	background-color: #ABBAC3;
  margin-bottom: 5px;
}
.github-badge .badge-subject {
	display: inline-block;
	background-color: #4D4D4D;
	padding: 4px 4px 4px 6px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
	display: inline-block;
	padding: 4px 6px 4px 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
	background-color: #4DC820 !important;
}
.github-badge .bg-orange {
	background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
	background: linear-gradient(to right, #3ca5f6, #a86af9) !important;
}
.github-badge .bg-lightgrey {
	background-color: #9F9F9F !important;
}

<div class="github-badge"><span class="badge-subject">test1</span><span class="badge-value bg-brightgreen">ahzoo</span></div>  
<div class="github-badge"><span class="badge-subject">home-page</span><span class="badge-value bg-blueviolet"> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i> home-page</span><span class="badge-value bg-orange "> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i></span><span class="badge-value bg-lightgrey">ahzoo</span></div>