Question

I need some help setting a border-top for a A element. As you can see here the button, which is a A styled element, have a

<hr> 

positioned absolute and then move from top to bottom to achieve the behavior but this work for this button (notice the width:85% in the HR) but if I want the same behavior in the rest of the buttons of all the site then this approach wont work cause the width:85%. So my question is: it’s possible to get the same behavior setting a border-top for the A element? The border top must have the same width as main button but leaving a padding: 0 5px as you may notice.

Thanks and cheers in advance

Answer 1

Yes, make the <a> act like a block element:

a{
   display:block;
   border-top: 2px solid #FCC;
 }

This will give a top border, the same color as your hr, to all <a> elements in your html.

or you could just apply it to your button class which you have on <a> tags already:

.button{
   display:block;
   border-top: 2px solid #FCC;
 }