You are reading...

December 16th

See how I coded the comment link in this blog.

Here’s how I managed to style the speech bubble and position it next to my “comment” link.

First the markup


<a class="comment" href="/">Comment<em></em></a>

Markup in WordPress


<a class="comment" href="<?php comments_link(); ?>">Comment
<em><?php comments_number('00','01','%'); ?></em></a>

The CSS

.comment {
font-size:14px;
text-transform:uppercase;
letter-spacing:.1em;
}

.comment em {
font-size:24px;
color:#000;
font-style:italic;
background:url(images/comment_large.png) no-repeat;
height:41px;
width:50px;
text-align:center;
display:inline-block;
line-height:36px;
position:relative;
top:-25px;
left:-3px;
letter-spacing:0;
}

Notes: display:inline-block allows an inline element to expand the specified width while allowing it to be next to the “comment” text. I am still looking for a solution in IE for the text in the bubble to align correctly.

Go home