Center a Pseudo Element

Center a "triangle" that was created with pseudo:after.

by enigmarm

HTML

<div class="tool-menu-wrapper">
		<ul id="tool-menu">
			<li >overview</li>
			<li >data input</li>
			<li class="current">data output</li>
			<li >ranking value</li>
			<li >search engines</li>
		</ul>
	</div>

CSS

#tool-menu li{
	list-style: none;
	float: left;
	margin: 5px 5px 20px 0px;
	padding: 8px;
	background: #f6f6f7;
	font-size: 1em;
	font-weight: bold;
}
#tool-menu li:hover{
	background-color: #d0dcf5;
}
#tool-menu  .current {
	color: #fff;
	background: #256f9e;
}
li.current:after {
	border-width: 1px 1px 0 0;
	content: ' ';
	background: #256f9e;
	display: block;
	height: 13px;
	position: absolute;
	width: 10px;
	top: 6;
	margin:0px auto;
	z-index: 99;
	transform: rotate(-224deg);
	-webkit-transform: rotate(-224deg);
	-moz-transform: rotate(-224deg);
	-ms-transform: rotate(-224deg);
	-o-transform: rotate(-224deg);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	text-align: center;
	float: center;
}