Question

我最近看过Chris Coyiers谈论伪元素，并希望尝试做同样的事情。

我希望获得指向右侧内容的箭头效果

这是我想要定位的li的位置

.overviews-list > li.active > ul.submenu > li.active

你可以从jsfiddle看到我想要的风格。我认为需要改变的CSS位于CSS的顶部。

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

Answer 1

这将设置定位并创建向下箭头。数字是自定义的，可以调整以更改箭头的大小及其位置。

.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

我这样做的其他东西，但它也适合你...

.pdfLink:before {
content:"\25BA";
color:#FF0000;
font-family: Arial,Helvetica,sans-serif;

}

我尝试过的所有代码都有效。我不记得我是如何看到char代码的格式的，但是如果你查看这个char description，格式很明显。

期待使用伪元素来创建三角形

2 个答案: