文本修饰：下划线不适用于内联块跨度元素

Question

I'm having an issue with text-decoration: underline on two spans that use inline-block . The [problem is only one part of the URL will underline when hovered, the other does not. I need to keep the display property, otherwise text-overflow won't get applied (see: Text-overflow: ellipsis alignment issue )

HTML:

<div class="details" itemscope itemtype="http://data-vocabulary.org/Product"> 
   <h2>
       <a class="heading" href="/product/acmesw" title="Acme Super Widget">
           <span class="trunc" itemprop="name">Acme Super Widget 3000</span>
           <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>     
        </a>
    </h2>
</div>

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/

Answer 1

By CSS specs , the underline does not affect inline blocks inside the element for which text-decoration: underline has been set.

You can make them underlined by explicitly setting that for them, for example by replacing the selector a:hover in your last CSS rule by the selector list a:hover, a:hover * .

This will not affect the ellipsis symbol, though. It is not part of any element content but inserted by a browser, so I don't think you can underline it.

Answer 2

How about using border-bottom to underline the text?

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

Answer 3

a little bit weird though...

add these css?

CSS

.details h2{
    border-bottom:1px solid #fff; /*use the same color as your .details background color*/
}
.details h2:hover {
    border-bottom:1px solid #f00;
}

See DEMO on jsfiddel... http://jsfiddle.net/c7p8w/14/