If you want to hint to the web browser where to break a word when it doesn't fit on the same line there's a nice little thing called soft hyphen, available through ­ (also ­ or ­).
<p>This is an example of a wordthat­shouldbreak in the middle if it doesn't fit on the same line.</p>
The above example will break the made up "wordthatshouldbreak" at the ­ character if the whole word doesn't fit on the same line, resulting in "wordthat-shouldbreak".
More info about line breaks and hyphenation over at W3's HTML 4.01 Specification.
<span class="step">1</span>A couple of tips:
If you want a bigger circle, change either font-size to enlarge everything by the same amount (both text and circle) or width, line-height and the border-radius' to only affect the circle (border-radius = half of the width and line-height values).
To center the circle with other text, place it in an element where you set a line-height that equals or exceeds the one of the circle.
In order to prevent the arrow to be underlined, position: absolute; is added to the a:after style. If you want it underlined, just remove this.
If you want to combine :after and :hover you must do it in this particular order a:hover:after, the other way around won't work.
/* Lets add an arrow after each link */
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
select table_name as Name
where TABLE_TYPE = 'BASE TABLE'
ClassFromConfig on Google Code
Direct download of version 1.5.1