Looking to use pseudo elements to create a triangle

Question

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.

http://jsfiddle.net/T2HuD/1/

Answer 1

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;
}

JS Fiddle

Answer 2

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.