html – 列表项下的项目符号

概述正如你在图片中看到的那样,列表项“Fashion”前面有一个子d,这只在悬停状态下显示.我的目标是将子d放在列表项下. 这是我现在的CSS： .top-menu-left ul li a:hover:before{ content: "\2022"; color: inherit; padding-right: 4px; position: relative; top: 1p 正如你在图片中看到的那样,列表项“Fashion”前面有一个子d,这只在悬停状态下显示.我的目标是将子d放在列表项下.

这是我现在的CSS：

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

有人可以帮助我吗？

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

>增加子d从顶部的距离
>通过左侧居中：50％和translateX(-50％)
>将子d设置为绝对位置,并将其父级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: "22";  position: absolute;  top: 1em;  left: 50%;  translate: translateX(-50%);}

<div >  <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％)只占用子d所需的空间(左图),通过display：block和text-align：center将区域拉伸到整个区域(右图).

结论：

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

总结

以上是内存溢出为你收集整理的html – 列表项下的项目符号全部内容，希望文章能够帮你解决html – 列表项下的项目符号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。