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>

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 { 
	position: relative /* needed for the span positioning */;
} a {
	display: block;
	font-size: 13px;
	padding: 5px 10px;
	color: #666;
} a:hover {
	color: #f60;
/* Our new Span */ 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;