我正在嘗試<hr>使用::after.在我的標簽末尾放置一個小點。但相反，元素被添加，就好像它添加到 ::before 的地方一樣。要設定樣式，<hr>我正在使用 Tailwind，但使用 CSS 執行 ::after 樣式。這是它現在的樣子，點在左邊。我希望它只是將小點放在線的另一端，在右邊。
這是我的代碼：
CSS
.right::after {
content: ' ';
width: 5px;
height: 6px;
position: absolute;
margin-top: -6px;
margin-left: -1px;
border-radius: 5px;
border: 5px solid #9596ff;
background-color: #9596ff;
}
HTML
<hr class="right mt-7 mb-5 border-t-1 w-full">
提前致謝！
uj5u.com熱心網友回復：
您需要指定position: relativeof hr，否則點將根據頁面的其余部分定位。
.right {
display: block;
position: relative;
}
.right::after {
content: ' ';
width: 5px;
height: 6px;
position: absolute;
margin-top: -6px;
margin-left: -1px;
border-radius: 5px;
border: 5px solid #9596ff;
background-color: #9596ff;
top: -1px;
right: -1px;
}<hr class="right mt-7 mb-5 border-t-1 w-full">uj5u.com熱心網友回復：
由于您正在使用，因此position: absolute;您需要添加right: 0;以將其移動。CSS 看起來像這樣。
.right::after {
content: ' ';
width: 5px;
height: 6px;
position: absolute;
margin-top: -6px;
margin-left: -1px;
border-radius: 5px;
border: 5px solid #9596ff;
background-color: #9596ff;
right: 0;
}
uj5u.com熱心網友回復：
您有絕對位置，但沒有提供放置說明。
我加了
right: 0;
top: 0;
到.right::after：
.right::after {
content: ' ';
width: 5px;
height: 6px;
position: absolute;
right: 0;
top: 0;
border-radius: 5px;
border: 5px solid #9596ff;
background-color: #9596ff;
}<hr class="right mt-7 mb-5 border-t-1 w-full">并使點看起來更像您的影像：
.right::after {
content: ' ';
width: 6px;
height: 6px;
position: absolute;
right: 0;
top: 6px;
border-radius: 3px;
background-color: #9596ff;
}<hr class="right mt-7 mb-5 border-t-1 w-full">轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360125.html