因此,我對您的代碼進行了一些更改,以解決您的問題：

>增加子彈從頂部的距離

>通過左側居中：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%);

}

• FASHION
• TRAVEL

編輯：

由于您試圖將項目符號放在列表項之后,您應該使用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居中并會溢出(左圖).

總結

以上是生活随笔為你收集整理的html项目符号正方形,html – 列表项下的项目符号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。