Change HTML output in Categories Widget

Here is an easy way to change how the Category Widget outputs HTML.
Simply add this chunk to your theme functions.php file.

add_filter('wp_list_categories', 'wpchunks_add_span_count');
	function wpchunks_add_span_count($links) {
	$links = str_replace('</a> (', '</a><span>', $links);
	$links = str_replace(')', '</span>', $links);
	return $links;
}

HTML result

The above chunk will output the following HTML into the Category Widget.

<li class="cat-item">
	<a href="#" title="Category Name">Category Name</a>
	<span>5</span>
</li>

This should be enough for you to target with CSS.

Bonus CSS

Here is a bonus little bit of CSS that may help you style your new Category Widget

li.cat-item { 
	position: relative /* needed for the span positioning */;
}
li.cat-item a {
	display: block;
	font-size: 13px;
	padding: 5px 10px;
	color: #666;
}
li.cat-item a:hover {
	color: #f60;
}
/* Our new Span */
li.cat-item span {
	position: absolute;
	top: 8px;
	right: 5px;
	font-size: 10px;
	padding-top: 3px;
	line-height: 1em;
	text-align: center;
	width: 16px;
	height: 16px;
	background: #f60;
	color: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}