Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

How can I add a short Orange line under the H3 tag here?

http://dev2.magickitchen.com/#popular  the photo here slides down, revealing text. The designer wants this, a short orange line under the H3 tag:

User generated image
I am not sure how to do this... a bottom border? Of course it needs to be responsive. Thanks in advance for your help
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Could you post the username and password to enter the site?
Avatar of Melody Scott

ASKER

I am not doing well in the thinking department, I do apologize. Please use mel and mel.
Add a span element in the h3 as this:
<div class="col-xs-12 col-sm-4 col-print-4">
              <a href="discounts/discounts.html">
                <div class="tab-heading">
                  <h3><span class="underline">Food For Seniors</span></h3>
                  <div class="tab">
                    &nbsp;
                  </div>
                </div>
                </a>
  </div>

Open in new window


And in the css file set the
.underline {
  border-bottom: 2px solid orange;
}

Open in new window

OK, sounds like a good solution, much appreciated!
SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I think I'll want to make them all the same width.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That might work, I'll try that. One problem I'm having is it is on top of the little tabs, the half-circles that hang down. The line needs to be hidden by those.
Ok, so that's there.. I need them to be behind that tab though. And the hr is kind of messing with the look of the tab. z-index doesn't do anything....
I'm trying something, so wait a moment, please...
Thanks, all!