html – 文本修饰：下划线不适用于内联块span元素

我遇到了文本修饰的问题：使用内联块的两个跨度下划线. [问题是,只有URL的一部分会在悬停时加下划线,另一部分不会.我需要保留display属性,否则不会应用text-overflow(参见：Text-overflow: ellipsis alignment issue)

HTML：

cope itemtype="http://data-vocabulary.org/Product"> 
   

CSS：

.details {
    width:300px;
    border:1px solid red;
}
.trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:60%;
}

h2 span {
    display:inline-block;
    vertical-align:top;
}

a:hover{
    text-decoration:underline;
    color:red;
}

jsFiddle：http://jsfiddle.net/c7p8w/2/

最佳答案

如何使用border-bottom来强调文本？

a {
     text-decoration:none;
    border-bottom: 1px solid blue; /*Remove this if you want it only on hover*/
}
a:hover {
    text-decoration:none;
    border-bottom: 1px solid red;
    color:red;
}

Fiddle

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。