/* --- ページングエリア --- */
.paging {
margin: 20px 0;
}

/* --- メニューエリア --- */
.paging .nl {
margin: 0;
padding: 4px 0; /* メニューのパディング（上下、左右） */
list-style-type: none;
text-align: center; /* メニューのセンタリング */
font-size: 80%; /* メニューの文字サイズ */
}
/* --- メニュー項目 --- */
.paging .nl li {
display: inline;
margin-right: -1px; /* 項目の右マージン */
}

/* --- リンク --- */
.paging .nl li a {
display: inline-block;
padding: 4px 8px; /* リンクエリアのパディング（上下、左右） */
background: #f9f9f9 url(page_gen.gif) repeat-x top; /* リンクエリアの背景 */
border: 1px #c0c0c0 solid; /* リンクエリアの枠線 */
text-decoration: none; /* テキストの下線（なし） */
}
/* --- ポイント時の設定 --- */
.paging .nl li a:hover {
background: #004080 url(page_act.gif) repeat-x top; /* ポイント時の背景 */
border: 1px #000080 solid; /* ポイント時の枠線 */
text-decoration: underline; /* テキストの下線（あり） */
color: #ffffff; /* ポイント時の文字色 */
}

/* --- アクティブな項目 --- */
.paging .nl li strong {
display: inline-block;
padding: 4px 8px; /* 項目のパディング（上下、左右） */
background: #004080 url(page_act.gif) repeat-x top; /* 項目の背景 */
border: 1px #000080 solid; /* 項目の枠線 */
color: #ffffff; /* 項目の文字色 */
}

/* --- リンクしない項目（前へ・次へ） --- */
.paging .nl li span {
display: inline-block;
padding: 4px 8px; /* 項目のパディング（上下、左右） */
background: #f9f9f9 url(page_gen.gif) repeat-x top; /* 項目の背景 */
border: 1px #c0c0c0 solid; /* 項目の枠線 */
color: #808080; /* 項目の文字色 */
}

<div class="paging">

<ul class="nl">
<li><span>&lt; 前へ</span></li>
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">次へ &gt;</a></li>
</ul>

</div>


<div class="paging">

<ul class="nl">
<li><a href="#">&lt; 前へ</a></li>
<li><a href="#">1</a></li>
<li><strong>2</strong></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">次へ &gt;</a></li>
</ul>

</div>