Re: Notched Left Navigation

[BaylorRae]

You can use the pseudo selector `::after` to semantically create new elements. Because it’s technically separated from the original element it doesn’t inherit the parents size. This should give you what you’re looking for. <http://codepen.io/BaylorRae/pen/iwynH>

Here’s the bit of code used to make it work.

li {
border: 1.25em solid #ddd;
position: relative;
}

li:after {
content: ”;

/* position the arrow */
position: absolute;
right: -1.25em;
top: 50%;
margin-top: -10px;

/* create the arrow */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

/* change the arrow color */
border-right:10px solid #fff;
}