我試圖在單詞或文本的末尾添加一個點。內容是由用戶插入的，因此它實際上可能不同，這會導致問題。我最好的靈魂是這樣的：
.box{
background-color: cornflowerblue;
width:100%;
height:100px;
}
h3{
text-align:Center;
}
.uglyDot{
width:10px;
height:10px;
background-color:blueviolet;
}
#box{
display:flex;
justify-content:center;
}<div class="box" id = "box">
<h3>A pretty long word here</h3>
<div class="uglyDot"></div>
</div>
<h3 id = "test">Small word</h3>
<div class="box" id = "box">
<h3>Small word</h3>
<div class="uglyDot"></div>
</div>它非常接近我想要實現的目標。然而，在這個例子中，星星占據了空間並將單詞推到了左邊。可以看到兩個不同的“小字”不是從同一個地方開始的。一個選項是將醜點設置為絕對位置，但它不起作用，因為內容可能不同......有人知道我如何解決這個問題嗎？
小提琴嘗試：https : //jsfiddle.net/fsbxoaj0/
您可以將::after此處用作：
.uglyDot::after {
content: ".";
width: 10px;
height: 10px;
background-color: blueviolet;
position: absolute;
}
.box {
background-color: cornflowerblue;
width: 100%;
height: 100px;
}
h3 {
text-align: Center;
}
.uglyDot::after {
content: ".";
width: 10px;
height: 10px;
background-color: blueviolet;
position: absolute;
}
#box {
display: flex;
justify-content: center;
}<div class="box" id="box">
<h3 class="uglyDot">A pretty long word here</h3>
</div>
<h3 id="test">Small word</h3>
<div class="box" id="box">
<h3 class="uglyDot">Small word</h3>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句