I have some troubles with CSS. I need menu element like on the picture. The problem is I can't get green rectangle with pseudo-element. If you know non-javascript solution or have some examples I will be glad to help.
HTML
<li class="current">
<a href="#section-2">Lorem Ipsum/a>
</li>
CSS
.current {
background: red;
&.current:after {
content: "";
height: 2.5em;
margin-top: -1.25em;
position: absolute;
background: #ddd;
right: -1em;
width: 2.5em;
z-index: 1;
}
}
Jsfiddle: http://jsfiddle.net/vCQZ6/1/
Here is a simple example using
border-right
. For a simple effect like that green rectangle (which in fact is a border) this approach is preferrable to using a pseudo-element.HTML
CSS
FIDDLE