CODEWITHSUNDEEP
htmlcss
user2954587
user2954587

Reputation: 4861

Add text underneath circles for line with circles

How can I add text underneath these circles? For example, under 1, have it say Invite friends and under 2 write Custom T-shirt of your choice. Codepen

I've found an example with text underneath but the issue is that it's fixed width and some of the text will be long so it's not a great solution. 

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
}

ul:before,
.active:after {
  content: '';
  width: 100%;
  border: 2px solid dodgerblue;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  z-index: -1;
}

.active:after {
  border-color: lightblue;
}

ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 50%;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
}

.active~li {
  background: lightblue;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
</ul>

Upvotes: 1

Views: 46

Answers (1)

theGleep
theGleep

Reputation: 1187

I believe this is what you were looking for?

I added two divs under your li - one for the number, one for the content. by breaking the li into being more of a marker, the control of child node css (margins and overflow especially) is easier to manage.

Then I split out ul:before and active:after to make them easier to manipulate as well.

You might want to do a diff on the CSS to see all of my changes.

Enjoy!

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
}

ul:before {
  content: '';
  width: 100%;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  border: 2px solid dodgerblue;
  z-index: -2;
}

li.active:after {
  content: '';
  width: 100%;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  margin-left: 1em;
  border: 2px solid lightblue;
  z-index: -1;
}

ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}

li {}

ul li {
  display: inline-block;
}

ul li div.number {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 50%;
  background: dodgerblue;
  margin: 0 1em;
  color: white;
}

ul li div.under {
  position: absolute;
  top 2em;
  left: inherit;
}

.active~li {
}
<ul>
  <li>
    <div class="number">1</div>
    <div class="under">some text</div>
  </li>
  <li>
    <div class="number">2</div>
    <div class="under">some more text</div>
  </li>
  <li>
    <div class="number">3</div>
    <div class="under">even more text</div>
  </li>
  <li class="active">
    <div class="number">4</div>
    <div class="under"></div>
  </li>
  <li>
    <div class="number">5</div>
    <div class="under"></div>
  </li>
</ul>

Upvotes: 1

Related Questions