HTML CSS list-style-position: outside not functioning as expected

I'm having trouble figuring out why the CSS property list-style-position: outside isn't working as expected. I've made sure to use the important tag and have included it in all my CSS classes, but for some reason, it's still not taking effect.

ol {
  list-style-type: none;
  list-style-position: outside !important;
}

ol.line {
  list-style-position: outside !important;
}

ol li:before {
  content: '✓';
  font-size: 30px;
}
<ol style="list-style-position: outside !important;">
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consecte...
    Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consecte...
    Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
</ol>

(Here is the CodePen link)

htmlcss

Answer №1

The reason for this behavior is due to the implementation of list-style-type: none;. To resolve this issue, you can simply eliminate that code and utilize the list-style-type property instead. If you prefer not to display numbers in your list (ordered list), you may want to switch to using <ul> tags and modify the bullet points using pseudo elements.

Answer №2

Take a look at this hyperlink

Why does list-style-position fail to work with pseudo-elements?

Alternatively, give this code snippet a try.

ol {
    padding:0;
    list-style-type: none;
    list-style-position: outside !important;
  }

ol li { padding-left:30px;position:relative;}

ol li:before {
    display:block;
    content: '✓';
    font-size: 30px;
    position:absolute;
    left:0px;
    width:30px;
    height:30px;
    top:0;
  }
<ol style="list-style-position: outside !important;">
    <li> Lorem ipsum dolor sit amet,      consectetuer adipiscing elit. Aenean </li>
    
    <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
    
   <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
  
   <li> Lorem ipsum dolor sit amet, consectuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean masta. Cum sociis natoque penatibus et magnis dis parturient money that's ridiculous. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
                  
</ol>

Answer №3

To achieve the desired result, it is recommended to utilize the list-style-type property on your li elements rather than using a content property on li::before.

ol {
  list-style-type: none;
  list-style-position: outside !important;
}

ol.line {
  list-style-position: outside !important;
}

li {
    list-style-type: "\1F44D";
}
<ol style="list-style-position: outside !important;">
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturent montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
     quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consecteuer adipiscing elia. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partunent montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
     quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consecterur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nev, pellentesque eu, pretium 
     quis, sam. </li>
</ol>

Answer №4

If you're looking to position your check marks before each list item, you can achieve this by adjusting the positioning of the li:before element in CSS:

(Apologies for any language errors)

ol {
  list-style-type: none;
}

ol li {
  position: relative;
}
ol li:before {
  position: absolute;
  content: '✓';
  left: -23px;
  top: -8px;
  font-size: 30px;
}
<ol>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
</ol>

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

Guide on deleting files from WordPress Media Library directly using PHP in the frontend

I have searched various sources while creating my current code, but I have yet to find the answer to this question: Link 1 Link 2 Link 3 Link 4 Creating a file management system where admin access is restricted from WordPress. They will manage files th ...

phphtmlwordpressfrontendmedia-library

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

Utilizing a switch to deactivate all currently active classes on individual div elements

I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...

javascripthtmlcss

After updating the External SS, the background vanishes

There appears to be an issue with a page that I designed. I originally wrote the CSS code internally within the <style type="text/css>...</style> section, including a background image, and all was working fine initially. However, after transf ...

htmlcssbackgroundexternal

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

Display a Bootstrap table that includes a visible vertical scrollbar

Creating a basic HTML page using Bootstrap library can be tricky when trying to incorporate a fixed header and a scrolling table. When simply adding a navbar and a table, the table ends up being positioned beneath the navbar, making it impossible to scroll ...

htmlcssbootstrap-5

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...

javascriptphpjqueryhtmlajax

What to do when JavaScript fireEvent isn't working as expected?

I've hit a roadblock while working on my JavaScript rendition of the classic game Battleship for a school project. I'm currently stuck on devising an AI for the opponent player. I have set up an event listener for when a cell is clicked on the pl ...

javascripthtmlcss

The active class consistently adds new menu options without removing the previous ones

I am facing an issue with my menu where the active class does not get added to the new menu item when clicked, despite being removed from the previous item. Below is the code snippet: <div class="row text-center" id="side-menu"> <nav> ...

jqueryhtmlcssnavigation

Determine the quantity of data entries in a Mysql database table using php

I organized a school voting process with 10 questions, allowing participants to select one teacher for each question from a pool of 80 teachers. Once a participant has voted for all questions, a new entry is inserted into my MySQL table. My MySQL table co ...

phphtmlmysql

In what scenarios would it be appropriate to utilize a checkbox value that is not simply limited to a binary choice of 1 or 0

It has come to my attention that many people on various platforms, including Stack Overflow and my colleagues, use values other than 1 or 0 in their checkboxes (for example, <input type='checkbox' value='check'/>). However, I beli ...

phpjqueryhtmlmysqlcheckbox

Delete the line height (or leading) for bigger text in CSS

Is there a way to eliminate the space above and below the mandatory span, specifically when using << within it? The height of the field row is determined by the default line-height for the text size, but the mandatory field is taller due to its larg ...

htmlcss

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...

javascriptjsonhtml

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

I am trying to collapse the table header but I am having trouble doing so

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); body { bac ...

javascripthtmlcssbootstrap-4html-table

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

"Maximizing the power of Jquery's .each function. What

In my jQuery code, I have the following: function lshow() { var delayt = 500; var showtime = 5000; var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm&a ...

jqueryhtmlqueueeach

Is it essential to have the bootstrap4 column 12 DIV for optimal performance on mobile devices?

Is it necessary to use bootstrap4 DIV col-12 for mobile devices? Even if a DIV takes up full width on mobile without col-12, why is it still recommended to include it? ...

csshtmltwitter-bootstrapbootstrap-4

Spotlight the content of the file obtained from GitHub

I'm having trouble with syntax highlighting for code fetched from GitHub. fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1") .then(response => response.text()) .then(data => document.getElem ...

javascripthtmlgithubsyntax-highlightinghighlight.js