元素右下角的 CSS '+' [关闭]

【问题标题】：CSS '+' in right bottom corner of element [closed]元素右下角的 CSS '+' [关闭]
【发布时间】：2016-07-05 22:07:15
【问题描述】：

我该如何做这样的事情：

它将处于:hover 和:active 状态。

【问题讨论】：

你能贴出你试过的代码吗？
请向我们提供一些代码，以便我们为您提供帮助。更好的小提琴或类似的东西

标签： html css

【解决方案1】：

下面是一些开始使用的代码。

ul{
  list-style: none;
  background-color: coral;
}
li {
  padding: 10px 20px;
  display: inline-block;
  position: relative;
}
li:hover:after{
  content: "+";
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: blue;
  position: absolute;
  font-weight: bold;
}

<div>
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Mission</li>
    <li>Vision</li>
  </ul>
</div>

注意：尝试实施要求，然后在必要时寻求帮助。

【讨论】：

@PraveenKumar：谢谢machi！