Vertical Align Colon With Numbers

I would like to create something as follows: I created the example (https://codepen.io/anon/pen/bvOPGE) with HTML:

• 30days

Solution 1:

You could make one div element inside li for its content and then use :after pseudo-element for : between elements. Also you could take text out of normal flow with position: absolute so that : is in line with numbers.

ul {
  list-style: none;
  display: flex;
  align-items: center;
}
ulli {
  display: flex;
  align-items: center;
}
ulli > div {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  padding: 020px;
  position: relative;
}
ulli:not(:last-child):after {
  content: ':';
  font-size: 30px;
}
ullispan:first-child {
  font-size: 60px;
}
ullispan:last-child {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

<ul><li><div><span>30</span><span>days</span></div></li><li><div><span>24</span><span>hours</span></div></li><li><div><span>60</span><span>minutes</span></div></li></ul>

Or you could use your HTML structure and add :after pseudo-element on span elements.

ul {
  list-style: none;  
  display: flex;
}
ulli {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
ullispan {
  font-size: 60px;
  display: block;
  position: relative;
  margin: 040px;
}
ulli:not(:last-child) span:after {
  content: ":";
  font-size: 30px;
  top: 50%;
  margin-left: 40px;
  transform: translateY(-50%);
  position: absolute;
}

<ul><li><span>30</span>days</li><li><span>24</span>hours</li><li><span>60</span>minutes</li></ul>

Solution 2:

You can insert the colons as li elements in between the other lis, making them inline-blocks, with the same font-size as the numbers and vertical-align: top;:

ul {
  list-style: none;  
}

ulli {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
}
ullispan {
  font-size: 32px;
  display: block;
}

<ul><li><span>30</span>days</li><liclass="colon">:</li><li><span>24</span>hours</li><liclass="colon">:</li><li><span>60</span>minutes</li></ul>

If you want the colons further up, apply position: relative to their li containers and move them up using a negative top value:

ul {
  list-style: none;  
}

ulli {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  position: relative;
  top: -4px;
}
ullispan {
  font-size: 32px;
  display: block;
}

<ul><li><span>30</span>days</li><liclass="colon">:</li><li><span>24</span>hours</li><liclass="colon">:</li><li><span>60</span>minutes</li></ul>

Solution 3:

I would add <span>s with colons in between the <li> tags

<ul><li><span>30</span>days</li><span>:</span><li><span>24</span>hours</li><span>:</span><li><span>60</span>minutes</li></ul>

and style the whole with a flexbox layout

ul {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

ul > li {
  text-align: center;
  text-transform: uppercase;
  width: 80px;
  display:flex;
  flex-direction:column;
}

ul > span, ul > li > span {
   font-size:32px;
}

see it in action at https://codepen.io/anon/pen/WzLqzO

Solution 4:

The answer by @Johannes looks like it should work, but I thought I might provide an alternative using the ::after selector:

ul {
  list-style: none;  
}

ulli {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}
.colon {
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  position: relative;
  top: -4px;
}
ullispan {
  font-size: 32px;
  display: block;
}

// here is the part that I added
lispan::after {
  content: ":";
  position: absolute;
  margin-left: 25px;
}
li:last-childspan::after {
  content: "";
}

Here is a JSFiddle