CSS list item with before side by side

Question

I have 3 items in a list, before each item the list item number is displayed and is suppose to be bigger than the actual text, which I got that part down, now I am trying to get them side by side.

Here is my code:

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

.columnStyle ol {
  padding: 0px;
  counter-reset: item;
  list-style-type: none;
}

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  display: block;
  color: black;
}

.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

Here is also a jsfiddle:

https://jsfiddle.net/vL5an1ox/

how do I get the number 1 next to its text and have the text vertically aligned middle?

score 2 · Accepted Answer · answered Jul 27 '21 at 17:18

You can put display: flex to .columnStyle ol li

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

.columnStyle ol {
  padding: 0px;
  counter-reset: item;
  list-style-type: none;
}

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  color: black;
  display: flex;
  align-items: center;
}


.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

score 0 · Answer 2 · answered Jul 27 '21 at 17:17

0

Jut update your li element CSS with display:flex; and align-items: center;

Just update your CSS

.columnStyle ol li {
    float: left;
    width: 33.3333%;
    padding: 35px;
    display: flex;
    color: black;
    align-items: center;
}

answered Jul 27 '21 at 17:17

Abdelrahman Hatem

1,028
1
9
20

score 0 · Answer 3 · answered Jul 27 '21 at 17:17

You can do this by using display: flex;

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

.columnStyle ol {
  padding: 0px;
  counter-reset: item;
  list-style-type: none;
}

.columnStyle ol li {
  float: left;
  width: 33.3333%;
  padding: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  color: black;
}

.columnStyle ol li::before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-right: 10px;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

score 0 · Answer 4 · answered Jul 27 '21 at 17:21

To get it exactly centered you need to make some adjustments beside setting display: flex and align-items: center on .columnStyle ol li which is padding-top: .1em and line-height: 1em on .columnStyle ol li:before and while you're at it, it makes sense to replace float with flex.

.columnStyle {
  column-count: 3;
  display: flex;
  justify-content: center;
  position: relative;
}

.columnStyle ol {
  display: flex;
  padding: 0px;
  counter-reset: item;
  list-style-type: none;
}

.columnStyle ol li {
  width: 33.3333%;
  padding: 10px;
  display: flex;
  align-items: center;
  color: black;
}

.columnStyle ol li:before {
  content: counter(item) "  ";
  counter-increment: item;
  color: #ce9c1f;
  padding-top: .1em;
  font-size: 8em;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1em;
}

<div class="columnStyle">
  <ol>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
    <li>Fusce vulputate ex eget eros congue laoreet. Nulla efficitur turpis magna, non aliquam mauris semper quis.</li>
  </ol>
</div>

CSS list item with before side by side

4 Answers4