Wordpress comment bubbles in CSS

comment_filter.php

// indicate if a post has comments or not
// note: $c is an array of strings
function childtheme_filter_post_class($c) {
	$c[] = get_comments_number() > 0 ? 'has-comments' : 'no-comments';
	return $c;
}

add_filter('post_class', 'childtheme_filter_post_class', 10, 1);

style.css

/* okay, fine. so i just wanted to see if i could make a bubble in css... */
.comment-count {
	float: right;
	margin-top: -.5em;
	margin-right: -1.5em;

	a {
		font-size: 1em;
		font-weight: bold;
		display: block;
		color: #333;
		text-decoration: none;
		padding: .25em .75em;
		border: 2px solid #777;
		@include border-radius(.5em);
		background-color: white;
		@include single-box-shadow(black * .4, 1px, 1px, 7px, false, false);
	}
	&:before { /* outer triangle */
		content:' ';
		position: absolute;
		width:0; height:0;
		margin-top: 2em; margin-left: .5em;
		border: .35em solid;
		border-color: #777 transparent transparent #777;
	}
	a:before { /* inner triangle. using the outer element so they are both on the left */
		content:' ';
		position: absolute;
		width:0; height:0;
		margin-top: 1.5em; margin-left: -.31em;
		border: .25em solid;
		border-color: white transparent transparent white;
	}
}
/* don't show if there are no comments */
.no-comments .comment-count { display: none; }

title_filter.php

// add the comment count to the title so we can style a  badge for it
function childtheme_filter_posttitle($title) {
	return '<div class="comment-count"><a href="' . get_permalink() . '"><span class="count">' . get_comments_number() . '</span></a></div>' . $title;
}

add_filter('thematic_postheader_posttitle', 'childtheme_filter_posttitle', 10, 1);