CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2953

CSS line and dot on same level with :after

I need one class and one class only to have a line and a dot. They should be line up one after another. So I try :after.

The issue I have is the dot is drops down to the next line. Please give me a hand to move the dot up and line up right after the line.

.wrapper {
border-top: 4px solid red;
width: 90px;
}
.wrapper::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: block;
 
  
}
<div class="wrapper">

</div>

Upvotes: 0

Views: 202

Answers (1)

Roy
Roy

Reputation: 8089

I think this is what you want to achieve. The position of the ball is done via position: absolute and calculating it from the left side of the border-top.

That results in left: calc(100% - 5px);, I made it a green ball to distinguish it from the bar.

Read more about positioning elements at MDN.

.wrapper {
  position: relative;
  border-top: 4px solid red;
  width: 90px;
}

.wrapper::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  display: block;
  position: absolute;
  bottom: -3px;
  left: calc(100% - 5px);
}
<div class="wrapper">

</div>

Upvotes: 3

Related Questions