How to set a css property to an inner element relative to the outer element?

[jiddisch]

#This is the HTML:

• A
• B
• C

#This is the CSS:

ul {
background: gray;
width: 50px;
}
ul li a.active {
border-right: 1px solid red;
}

I want the red border of the ‘active’ element to be shown outside the box on a fixed position (no metter the length of the ‘a’ element).

It’s on a CMS and I don’t have control to move the ‘active’ class to the ‘li’ element. How can I do it with this markup?

http://jsfiddle.net/7fdMh/

[wolfcry911]

ul a { display: block;}

[jiddisch]

Thank You!
And if I want to place the little red border a few pixels outside the box, what do I need to do?

[daffy58]

Give it a little trick with white border of anchor tag

ul a { display:block; border-right: 1px solid #fff;}

[Sarfaraj]

Hey @jiddisch please check this. http://jsfiddle.net/7fdMh/3/

[TheDoc]

Just another little note: I actually prefer to put the active class on the outer most element, in this case the `

[Sarfaraj]

ul {
background: gray;
width: 50px;
}
ul li a.active {
border-right: 1px solid red;
display:block;
}

[JTParrett]

You could give all the other anchors a white border, making the red border seem as if it’s outside of the ul. Or you could give the anchors a gray background instead of the ul and then give the anchors a transparent border, so that the whole section can be placed on any colour background and the effect will still apply. I hope that makes sense :P

http://jsfiddle.net/Jb6W6/

[Paulie_D]

Or use a box shadow..http://codepen.io/Paulie-D/pen/GrnAt

[wolfcry911]

simply give the anchor width: 100% and the border will render outside the li

[jiddisch]

Thank You all!
especially to wolfcry911.

[Author]

Posts