Css 菜单列表项顶部的标记

当我将鼠标悬停在菜单列表项上时，如何创建一个出现在菜单列表项顶部的标记？就像它们的标记一样。 是否可以仅使用css创建

---

编辑：我不想要你的代码，我只想要一些提示，因为我不知道从哪里开始。

如果你有一个简单的导航，可以：

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

---

如果我们说的只是CSS，请看一下伪类

这可以与

可视性

结合起来创建如下内容：

span{
可见性：隐藏；
字体大小：粗体；
}
悬停跨度{
能见度：可见；
}

|您好

请仅尝试以下CSS：

CSS

HTML

---

看看它是否是你想要的。

这里有一个你想要实现的最简单的例子。最重要的部分是

:before

伪元素和

的
位置：relative

ul li a:hover {
  border-top: 2px solid black;
}

    .menu-wrap {
    overflow: hidden;
    width: 100%;
    height: auto;
    position:relative;
}
.menu-wrap div{
    position:relative;
    margin-top:100px;
    display:inline-block;
    border:2px solid red;
    width:100px;
    height:10px;
    padding:10px;
    }
.menu-wrap div:hover:before{
    content:'|'; /*--------you can put image here as marker*/
    position:absolute;
    bottom:40;
    font-size:1.3em;
    margin-left:50px;
    font-weight:bold;
}

<div class="menu-wrap">              
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

a:hover:before {
    content:"";
    width: 2px;
    height: 20px;
    background: #000;
    position: absolute; /* Only works well when the parent is 'position:relative' */
    left: 50%;
    top: -10px;
}