Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side.

This is the code snippet I have implemented:

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

In addition, here is a link to a jsfiddle for reference:

https://jsfiddle.net/vL5an1ox/

I am looking to align the number 1 next to its respective text and ensure that the text is vertically centered. Any insights on how to achieve this?

htmlcss

Answer №1

Try adding display: flex to the .columnStyle ol li selector.

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

Answer №2

To enhance your list element styling, incorporate display:flex; and align-items: center;

Simplify your CSS

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

Answer №3

To achieve this effect, simply utilize the display: flex; property in your CSS.

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

Answer №4

To ensure perfect centering, adjustments must be made in addition to applying display: flex and align-items: center to .columnStyle ol li. It is essential to include padding-top: .1em and line-height: 1em on .columnStyle ol li:before, and while making these changes, it is advisable 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting nested table rows in vueJS is an essential feature to enhance

I am working with a json object list (carriers) that looks like this: https://i.stack.imgur.com/0FAKw.png Within my *.vue file, I am rendering this using the following code: <tr v-for="carrier in this.carriers"> <td>{{ carrier.id ...

javascripthtmlvue.js

What is the complete list of features that ColorTranslator.FromHtml() supports and what are the reasons behind its departure from traditional CSS color interpretation guidelines

I'm looking to enhance an API by providing users with the ability to specify the color of something. I want it to accept various representations of colors, such as hex codes and CSS colors. Initially, I thought that ColorTranslator.FromHtml() would fu ...

c#css.netcolors

Preventing div contents from shrinking with changing screen sizes

I am currently working on creating a portfolio website similar to this one. Check out the Website Here Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. Howe ...

css

What is the best way to insert HTML elements in front of other HTML elements using a form and jQuery?

I am looking to insert new HTML elements before existing ones using a form and jQuery: Here is the initial HTML Code: <div class="main-content"> <h2 class="main-content-header">Projekte</h2> <div class="project-content"> ...

javascriptjqueryhtml

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Encountered a runtime error while trying to insert a list item <li> into a paragraph <p> element

Take a look at this code snippet: <%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication18._Default" %> <!DOCTYPE html> <html> <body> <p id="someId"></p& ...

javascripthtmlasp.netweb

Tips for utilizing socket.io for managing requests

Trying to implement socket.io for communication between an HTML page and an HTTP server, encountering the error message "Cannot POST / [HTTP/1.1 404 Not Found 1ms]". Below is the server-side code: var express = require('express'); var app = expr ...

htmlnode.jssocket.iohttprequest

Choosing a nested object within a JavaScript object

Is there a way to select the style contents of an object within another object? The data consists of a json encoded array. In my scenario, I am using data[i].replies and getting 2. How can I access data[i].userstyles instead? It seems to be an object. I ...

javascripthtmlarraysjsonobject

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

javascriptcss

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

jqueryjquery-animatecss

Steps to animate a div expanding to fit its content dimensions

I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in hei ...

jquerycssanimation

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

My HTML Table is generated from my database, containing information about machines and their status pulled from emails with HTML Tables. Each row has a click option to open/hide the <td> tag showing the original table for more details and better trac ...

javascripthtmlhtml-table

Margin challenge in CSS

Just starting out with CSS, so please be patient with me. I'm currently working on customizing a form and everything is looking good, except for the confirmation label which is located in a div. I've managed to create space between other elements ...

csshtml

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

javascripthtmlreactjshtml-tabledrag-and-drop

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

Combine lists with floating elements positioned to the left or right

My HTML includes the following ul tag: <ul style="position:absolute"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li> list 4 <p>list 4 content goes here</p> ...

htmlcss

Uploader and viewer tool for HTML5 documents

My website is currently built using PHP and allows users to add and view documents. The current upload process is basic, requiring users to manually input information and then view the document with minimal formatting on a webpage. I am looking to upgrade ...

htmldocumentdocumentviewer

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

In the production mode, Nuxt styles may not be properly applied

After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied. For more information, I have imported styles both in c ...

cssvue.jsnuxt.jspostcsspostcss-loader

A quick and easy way to locate the object tag along with the param, and insert the embed tag within an HTML document is

Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...

phphtml