如何用css创建一个带有小突破的下划线？

Question

这将是一个难以解开的问题，但请保持开放的态度。

我的实验：

我有一个包含一些内容的div，这个div在加载时隐藏。 所以现在我有一个元素，当它被点击时显示div的内容。

我想要的是什么：

我想在中间创建一个下划线小的下划线，当我点击它时会给我一个desiered show / hide效果。

我的css技能没什么可吹嘘的，老实说，我甚至不知道从哪里开始。

可能澄清的图片：

我该怎么做？

Answer 1

如果您不需要支持旧浏览器，则可以创建一个带边框的三角形：

.nav-item::after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
}

显然需要适应你想要的地方。

如果您需要支持旧浏览器，您可以绝对定位三角形图像以显示在导航项目下。

Answer 2

试试这个

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
}

Answer 3

java.util.concurrent.TimeUnit