html - 文本和边框之间的下部空间

Question

我的 HTML

        <div id="ctl00_cphBreadCrumb_TDDF5635D005_ctl00_ctl00_Breadcrumb" class="RadSiteMap RadSiteMap_Sitefinity">
             <li class="rsmItem sfBreadcrumbNavigation">
              <a class="rsmLink" href="default">Default</a>
                 <span class="arrow"> &gt;</span>
               </li> 
               <li class="rsmItem sfNoBreadcrumbNavigation">
                   <span style="color: #999;font-family: myriadpro-bold-webfont;font-size: 10px;">Services</span>
               </li>
            </ul>
        </div>

CSS:

.rsmLink {
    position: relative;
    text-decoration: none !important;
    color: #044470 !important;
    border-bottom: 1px solid #044470 !important;
    font-family: myriadpro-bold-webfont !important;
    font-size: 10px !important;
    padding: 0 !important;
    letter-spacing: 1px;
}

但是我在链接和边框之间得到了一些空间。如果我使用下划线而不是边框​​，它不会像预期的那样低。我想要在边框给出的内容和下划线给出的内容之间留出空间。边框的尺寸应该比实际尺寸小一点。你能帮帮我吗？

Fiddle 谢谢。

Answer 1

text-decoration 和 border-bottom 之间有很大差异，但您可以尝试使用这样的伪元素:

.rsmLink:before
{
    content: '';
    position:absolute;
    bottom:0;
    width: 100%;
    height: 1px;
    background: #044470;
}

FIDDLE

如果这不是您所需要的，您可以使用底部规则...比如 bottom:-1px 。

结果看起来类似于 border-bottom 但是嘿，我会让你眯着眼睛。