Concatenate 2 text elements on a line with full-width border using CSS only
- by Michael Horne
Okay, I'm a newbie to CSS3, so please be gentle. ;-)
I'm working with some Wordpress code (Woocommerce plugin, to be exact), and I'm trying to format a line of code in a sidebar so that 2 separate text items (one in an <a, the other in a <span are all on the same line, the full width of the column, and with a bottom border.
It looks something like this (except the bottom border on each text do not go all the way across the enclosing sidebar box):
http://www.dalluva.com/temp/browse-catalog.JPG
(sorry, I'm new and can't post inline images yet)
Here's the code fragment I'm trying to live with (i.e. I don't want to change it):
<div class="widget">
...
<ul class="product-categories">
<li class="cat-item">
<a href="http://localhost/dalluva/shop/product-category/books/">Books</a>
<span class="count">(5)</span>
</li>
...
And here's the CSS I have now:
.widget ul li a {
border-bottom: 1px solid #e9e9e9;
line-height:1.0;
padding: 5px 0 5px 22px;
display: inline-block;
}
.widget ul li span {
border-bottom: 1px solid #e9e9e9;
line-height: 1.0;
padding: 5px 0 5px 0;
display: inline-block;
}
The output in the image above looks right for this CSS code, but when I change the 'span' CSS to include a width:100%, it causes the span element to wrap to the next line, looking like this:
http://www.dalluva.com/temp/browse-catalog-2.JPG
I've played with white-space:nowrap, overflow:hidden, etc, but I can't seem to find a way to have both the <a and the <span text on the same line with the border extending the full width of the column.
Any suggestions on getting the desired effect through CSS only?
Thanks.
Michael
