pretag

HTML

<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
	<strong><b>3</b>property: value;</strong>
}
</code></pre>


<br>

<pre><code>
<strong><b>1</b>selector</strong> {
	<strong><b>2</b>property</strong>: <strong><b>3</b>value</strong>;
}
</code></pre>

CSS

pre > code {
	white-space: pre;
}

pre strong, pre b, pre code { font: normal 16px/18px consolas, sans-serif; }

pre {
	display: inline-block;
	background: url('../images/code-background.gif') rgb(230,230,230);
	padding: 0 20px 10px;
	-webkit-border-radius: 10px;
}

pre strong {
	display: inline-block;
	background: rgb(58,210,255);
	-webkit-border-radius: 5px;
	padding: 0 3px;
	position: relative;
}

pre > code > strong {
	margin-top: 25px;
	background: rgba(58,210,255,.4);
	padding: 3px;
}

pre > code > strong:first-of-type { margin-top: 10px; } /* <<<---- Ineffective code */

pre strong > b {
	position: absolute;
	height: 18px; width: 18px;
	top: -18px; left: 8px;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	background: black;
	color: white;	
	-webkit-border-radius: 9px;
}

pre strong > b:after {
	content: '';
	position: absolute;
	top: .991em; left: 0.127em;
	border: 7px solid transparent;
	border-top-color: black;
}

ul.code-detail {
	list-style: none;
	font: normal 14px/21px 'Open Sans', sans-serif;
	max-width: 65%;
}

.code-detail li{
	position: relative;
	box-sizing: border-box;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dotted gray;
	padding-left: 30px;
}

.code-detail li a {
	color: #6FDEFF;
	font-weight: bold;
	font-size: 14px;
	line-height: 15px;
	text-decoration: none;
	border-bottom: 1px dashed #3AD2FF;
	-webkit-transition: all .5s;
}

.code-detail li a:hover {
	color: #3AD2FF;
	border-bottom: 1px solid #3AD2FF;
}

.code-detail li:nth-of-type(1) { border-top: none; }

.code-detail b {
	font: bold 15px/21px 'Open Sans', sans-serif;
}

.code-detail b:nth-of-type(1) {
	position: absolute;
	font-family: consolas;
	left: 2px; top: 10px;
	width: 20px; height: 20px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	color: white;
	background-color: black;
	-webkit-border-radius: 10px;
}