Personalize the style of ordered lists

Question

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. https://i.sstatic.net/BQok4.png

However, instead of the circle used in that picture, I want to use a different CSS Image like the one (without text) shown here https://i.sstatic.net/qWoRZ.png

I've tried using the code provided by the other website, but I'm unsure how to change the blue circle to the green symbol. Can anyone assist me with this?

 .blog-blau-liste {
    position: relative;
    margin: 0.8em 0px 0px;
    list-style: outside none none;
    counter-reset: big-numba;
    padding-left: 0px;
}

.blog-blau-liste-item {
    position: relative;
    margin: 0.8em 0px 0px 1.9em;
    list-style: outside none none;
}

.blog-blau-liste-item::before {
    content: counter(big-numba, decimal);
    counter-increment: big-numba;
    position: absolute;
    top: -2px;
    font-size: 19px;
    left: -1.9em;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    color: #FFF;
    background: #009DD9 none repeat scroll 0% 0%;
    font-weight: 600;
    text-align: center;
    border-radius: 50%;
}

    <ol class="blog-blau-liste">
<li class="blog-blau-liste-item">Point Number 1</li>
<li class="blog-blau-liste-item">Point Number 2</li>
<li class="blog-blau-liste-item">Point Number 3</li></ol>

Is there a way to achieve this and create the green logo (just the circle without text and white line) using CSS?

I came across this code which is not rounded, and I'm unsure how to implement it.

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

<div id="burst-8">1</div>

css html-lists

Answer 1

Answer №1

Creating Shapes Using ::after and ::before Pseudo Elements

A new method has been developed to create shapes using the ::after and ::before pseudo elements in CSS. This technique combines previous approaches mentioned in earlier responses, with a limitation of only being able to create shapes with 8 sides. To overcome this limitation, additional HTML elements would need to be created within each li element. Here is an example of how this can be achieved:

.shape-list {
    list-style: none;
    counter-reset: shape-list-number;
}

.shape-list li { position: relative; margin-bottom: 20px;}

.shape-list li::before, .shape-list li::after {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  width: 50px;
  background: green;
  border-radius: 10px;
  font-size: 2em;
  color: #FFF;
  text-align: center;
}

.shape-list li::before {
  content: counter(shape-list-number, decimal);
  counter-increment: shape-list-number;
  margin-right: 20px;
}

.shape-list li::after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  transform: rotate(45deg);
}

<ol class="shape-list">
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
</ol>

Check out the live demo on jsFiddle: https://jsfiddle.net/azizn/Lda7hwkj/

The key aspect of this method is that the transformation is applied to the ::after pseudo-element so that it does not impact the number displayed. By adding a z-index of -1, the ::after element is positioned behind the ::before element to prevent overlapping.

Original Approach:

To apply images as backgrounds to each li element's ::before pseudo-element, follow this code snippet:

.image-list {
    list-style: none;
}

.image-list li::before {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  background: url("https://i.sstatic.net/qWoRZ.png") no-repeat center;
  background-size: contain;
  margin-right: 10px;
}

<ol class="image-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

View the implementation on jsFiddle: https://jsfiddle.net/azizn/ffyrhu7o/

Edit: For those looking to recreate shapes using pure CSS, utilize the border-radius property for smooth edges. Here's an example:

body {margin:3em;}

.custom-shape {
  background: green;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 2em;
  color: #FFF;
  position: relative;
  text-align: center;
  border-radius: 10px;
}

.custom-shape::before, .custom-shape::after {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0; left: 0; bottom: 0; right: 0;
  background: inherit;
  border-radius: inherit;
  transform: rotate(27deg);
}

.custom-shape::after {
  transform: rotate(-30deg);
}

<div class="custom-shape">1</div>

Experiment with the code on jsFiddle: https://jsfiddle.net/azizn/r3wtjemr/

Answer 2

Creating Shapes Using ::after and ::before Pseudo Elements

A new method has been developed to create shapes using the ::after and ::before pseudo elements in CSS. This technique combines previous approaches mentioned in earlier responses, with a limitation of only being able to create shapes with 8 sides. To overcome this limitation, additional HTML elements would need to be created within each li element. Here is an example of how this can be achieved:

.shape-list {
    list-style: none;
    counter-reset: shape-list-number;
}

.shape-list li { position: relative; margin-bottom: 20px;}

.shape-list li::before, .shape-list li::after {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  width: 50px;
  background: green;
  border-radius: 10px;
  font-size: 2em;
  color: #FFF;
  text-align: center;
}

.shape-list li::before {
  content: counter(shape-list-number, decimal);
  counter-increment: shape-list-number;
  margin-right: 20px;
}

.shape-list li::after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  transform: rotate(45deg);
}

<ol class="shape-list">
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
</ol>

Check out the live demo on jsFiddle: https://jsfiddle.net/azizn/Lda7hwkj/

The key aspect of this method is that the transformation is applied to the ::after pseudo-element so that it does not impact the number displayed. By adding a z-index of -1, the ::after element is positioned behind the ::before element to prevent overlapping.

Original Approach:

To apply images as backgrounds to each li element's ::before pseudo-element, follow this code snippet:

.image-list {
    list-style: none;
}

.image-list li::before {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  background: url("https://i.sstatic.net/qWoRZ.png") no-repeat center;
  background-size: contain;
  margin-right: 10px;
}

<ol class="image-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

View the implementation on jsFiddle: https://jsfiddle.net/azizn/ffyrhu7o/

Edit: For those looking to recreate shapes using pure CSS, utilize the border-radius property for smooth edges. Here's an example:

body {margin:3em;}

.custom-shape {
  background: green;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 2em;
  color: #FFF;
  position: relative;
  text-align: center;
  border-radius: 10px;
}

.custom-shape::before, .custom-shape::after {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0; left: 0; bottom: 0; right: 0;
  background: inherit;
  border-radius: inherit;
  transform: rotate(27deg);
}

.custom-shape::after {
  transform: rotate(-30deg);
}

<div class="custom-shape">1</div>

Experiment with the code on jsFiddle: https://jsfiddle.net/azizn/r3wtjemr/

Answer 3

Answer №2

ul{ 
    list-style-image: url("CustomImage.png") 
}

Answer 4

ul{ 
    list-style-image: url("CustomImage.png") 
}

Answer 5

Answer №3

To enhance the look of your sentences, consider incorporating a png image at the beginning of each one. This simple touch will add visual interest without overwhelming your page. You have endless possibilities for customization to suit your aesthetic preferences. For dynamic effects, explore options such as:

applying a class attribute + Jquery (utilizing before, for instance)
exploring the use of ul list-style-image
or experimenting with CSS before pseudo-element like you did before - check out this insightful post

Answer 6

To enhance the look of your sentences, consider incorporating a png image at the beginning of each one. This simple touch will add visual interest without overwhelming your page. You have endless possibilities for customization to suit your aesthetic preferences. For dynamic effects, explore options such as:

applying a class attribute + Jquery (utilizing before, for instance)
exploring the use of ul list-style-image
or experimenting with CSS before pseudo-element like you did before - check out this insightful post

Answer 7

Answer №4

    .vegan-list {
        list-style: none;
      counter-reset: section;
    }

    .vegan-list li::before {
       counter-increment: section;
    content: counter(section);
      display:inline-block;
      vertical-align: middle;
      height: 50px;
      width: 50px;
      background: url("https://i.sstatic.net/qWoRZ.png") no-repeat center;
      background-size: contain;
       line-height: 50px;
    text-align: center;
    font-size: x-large;
    color: brown;
    }

    <ol class="vegan-list">
      <li>Item Number 1</li>
      <li>Item Number 2</li>
      <li>Item Number 3</li>
    </ol>

Answer 8

    .vegan-list {
        list-style: none;
      counter-reset: section;
    }

    .vegan-list li::before {
       counter-increment: section;
    content: counter(section);
      display:inline-block;
      vertical-align: middle;
      height: 50px;
      width: 50px;
      background: url("https://i.sstatic.net/qWoRZ.png") no-repeat center;
      background-size: contain;
       line-height: 50px;
    text-align: center;
    font-size: x-large;
    color: brown;
    }

    <ol class="vegan-list">
      <li>Item Number 1</li>
      <li>Item Number 2</li>
      <li>Item Number 3</li>
    </ol>

Personalize the style of ordered lists

Answer №1

Creating Shapes Using ::after and ::before Pseudo Elements

Answer №2

Answer №3

Answer №4

Similar questions

Turn off the functionality of Telerik in DotNetNuke

CSS: Trouble with elements positioning

What could be causing my div to display a horizontal scrollbar in Firefox?

hide the side menu automatically - wordpress

Issue with IE failing to load a particular Stylesheet

NodeJS for CSS Parsing and Selecting

Expanding divs automatically depending on the content they contain

Tablet displaying incomplete background image

Web Dialogue Dimensions: Adjusting the MDC-Web Dialog Width

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Incorporating a unique BRAND logo as the header of an HTML page

AngularJS input range is written inside the bubble that crosses over the screen

Matching up irregular rows in div-made table

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

JavaScript function to toggle the visibility of navigation with a click of a button

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Unexpected blank space detected at the bottom of the page in Angular 13

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Addressing the spacing and alignment issues within the progress bar