如何在CSS中修改反向三角形属性

Question

我正在尝试修改http://cssmenumaker.com/menu/platinum-tabbed-dropdown-menu

中的菜单栏模板

基本菜单栏结构如下“

<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>`

对于包含第二层的标签，它包含一个反向三角形，就像这样~~食物▼。

但是，我想更改三角形属性。我该怎么办？

Answer 1

如果你在开发者控制台上查看其中一个带有该三角形的项目的CSS代码，你可以看到它使用：after CSS属性，三角形本身就是一个图像：

因此，您可以在CSS中添加另一个图像来更改它，或者使用CSS转换属性进行旋转，如控制台上所示。

干杯！

Answer 2

这在CSS中称为:: after选择器。 :: after选择器在每个所选元素的内容之后插入一些内容。使用content属性添加所需内容。 S 如下图所示，您正试图在Chrome开发者工具中遵循以下内容。