I recently watched Chris Coyiers talk about pseudo elements and was looking to try and do the same.
I am looking to get the effect of an arrow pointing to the content on the right
This is the location of the li that I want to target
.overviews-list > li.active > ul.submenu > li.active
You can see from the jsfiddle the style I am going for. I think the css that needs to be changed is at the top of the css.
2 Answers
This will set the positioning and create a down pointing arrow. The numbers are custom and can be adjusted to change the size of the arrow and its position.
.overviews-list > li.active > ul.submenu > li.active {
position: relative;
}
.overviews-list > li.active > ul.submenu > li.active:after {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-top: 15px solid white;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
top: 25%;
right: 10px;
}
I do this for something else but it should work for you too...
.pdfLink:before {
content:"\25BA";
color:#FF0000;
font-family: Arial,Helvetica,sans-serif;
}
All codes I have tried work. I can't recall how I came across that format for the char code, but the format is obvious if you check out this char description.
