html – 列表项下的项目符号

前端之家收集整理的这篇文章主要介绍了html – 列表项下的项目符号前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
正如你在图片中看到的那样,列表项“Fashion”前面有一个子弹,这只在悬停状态下显示.我的目标是将子弹放在列表项下.

这是我现在的CSS:

.top-menu-left ul li a:hover:before
{
  content: "\2022";
  color: inherit;
  padding-right: 4px;
  position: relative;
  top: 1px;
}

有人可以帮助我吗?

解决方法

因此,我对您的代码进行了一些更改,以解决您的问题:

>增加子弹从顶部的距离
>通过左侧居中:50%和translateX(-50%)
>将子弹设置为绝对位置,并将其父级li设置为相对位置,否则只要将鼠标悬停在其上,链接就会略微向右移动(并且中心部分会稍微困难)

您可以查看下面的代码段以查看最终结果:

.top-menu-left ul {
  list-style: none;
}

.top-menu-left ul li {
  display: inline-block;
  position: relative;
}

.top-menu-left ul li + li {
  margin-left: 25px;
}

.top-menu-left ul li a:hover:before {
  content: "\2022";
  position: absolute;
  top: 1em;
  left: 50%;
  translate: translateX(-50%);
}
<div class="top-menu-left">
  <ul>
    <li><a>FASHION</a></li>
    <li><a>TRAVEL</a></li>
  </ul>
</div>

编辑:

由于您试图将项目符号放在列表项之后,您应该使用after伪元素(感谢@ErickPetrucelli).

如果你愿意,你仍然可以通过右(而不是左)和translateX来定位它,或者如果你不想这样做,你可以改为采用以下方法

.top-menu-left ul li a:hover:after {
  [...]
  display: block;
  width: 100%;
  text-align: center;
}

两种技术之间只有一个小的区别:通过左边定位:0或右边:0和translateX(-50%)只占用子弹所需的空间(左图),通过display:block和text-align:center将区域拉伸到整个区域(右图).

结论:

考虑到您可能只展示上述子弹,使用哪种方法无关紧要.
但是让我们说你想在链接下面显示一些文字,然后display:block方法可能会更好地为你服务,因为它允许文本很好地包装(右图),就像前一种方法一样,文本不会’ t居中并会溢出(左图).

原文链接:https://www.f2er.com/html/223940.html

猜你在找的HTML相关文章