text-decoration:underlineとborder-bottom下線はどっちがいいの?

CSSで装飾するときに同じ効果を表示できるタグがあるのですがどっちがいいのかという話。

調べてみたところ「text-decoration:underlineがいい」ということが分かりました。

理由はfontの種類(主にメイリオの場合)によってborder-bottomは変な余白が出てしまうためということでした。

下線に関してはtext-decoration:underlineは万能!ということで!

[CSS]リストに矢印装飾を:before要素CSSだけで表現

HTML

<ul class=”arrow”>
<li><a href=”#”>事務所のご案内</a></li>
<li><a href=”#”>行政書士プロフィールはこちら</a></li>
</ul>

CSS

.arrow li {
position: relative;
display: inline-block;
padding-left: 12px;
}
.arrow li:before {
content: ”;
width: 0;
height: 0;
border: solid 4px transparent;
border-left: solid 5px #014eb4;
position: absolute;
top: 50%;
left: 0;
margin-top: -4px;
}