Im trying to add a dot in the end of a word or text. The content is inserted by the user so it can actually be different, which causes the problem. My best soulotion looks like this:

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

It is very close to what I'm trying to acheive. However in this example the star takes up space and pushes the word to the left. You can see that the two different "Small word" dont start from the same place. An option would be to set the uglyDot to position abolute but it doesn't work since the content can be different... Anyone got an idea how I solve this?

Fiddle to try: https://jsfiddle.net/fsbxoaj0/

CodePudding user response：

You can make use of ::after here as:

.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want to keep your dot as a DOM element for whatever reason, you should place it insde your h3 and add display : inline-block to it, otherwise I'd recommand using css pseudo-element ::after

.box{
  background-color: cornflowerblue;
  width:100%;
  height:100px;
}
h3{
  text-align:Center;
}
.uglyDot{
  display: inline-block;
  width:10px;
  height:10px;
  background-color:blueviolet;
}
#box{
  display:flex;
  justify-content:center;
}

<div class="box" id = "box">
  <h3>A pretty long word here   <span class="uglyDot"></span></h3>
   
</div>
   <h3 id = "test">Small word</h3>

<div class="box" `enter code here`id = "box">
  <h3>Small word <span class="uglyDot"></span></h3>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This might be a solution with more lines but like Xanthous use inline-block, and use margin-right:-10px; to both Small word aligned

.box{
  display:flex;
  justify-content:center;
  background-color: cornflowerblue;
  width:100%;
  height:100px;
}
.box h3{
  margin-right:-10px;
  justify-self:center;
  text-align:Center;
  border:1px solid black;
}
h3{
  justify-self:center;
  text-align:Center;
  border:1px solid black;
}

.uglyDot{
  display:inline-block;
  width:10px;
  height:10px;
  background-color:blueviolet;
}

<div class="box">
  <h3>A pretty long word here</h3>
  <div class="uglyDot"></div>
</div>

  <h3>Small word</h3>

<div class="box">
   <h3>Small word</h3>
  <div class="uglyDot"></div>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>