How can you create an ordered list with letters and parentheses using HTML5 and CSS?

Is it possible to use letters with ")" instead of "." in an ordered list format? For example:

a) Some text...
b) Some text...
c) Some text...

Currently, I am seeing:

a.) Some text...
b.) Some text...
c.) Some text...

I need to remove the periods.

CSS:

.theclass ol li{
  margin: 0 0 0 1em;
}

.theclass ol li:before{
  content: ') ';
  position: absolute;
  margin-left: -3.4em;
  text-align: right;
  width: 3em;
}

HTML:

<div class="theclass">
 <ol type="a">
   <li>Some text...</li> 
   <li>Some text...</li>  
   <liSome text...  </li> 
 </ol>
</div>
csshtmlhtml-lists

Answer №1

Upon my search, I stumbled across this information.

Regrettably, I lack the necessary points to praise. This is not my own solution!

Discovered it at: Ordered list (HTML) lower-alpha with right parentheses?

View an example on Jsfiddle

ol {
counter-reset: list;
margin: 0; }

ol > li {
list-style: none;
position: relative; }

ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em; }

I believe this may be what you are seeking..?

An alternative response can be located here: How to remove dot “.” after number in ordered list items in OL LI? answered by Moin Zaman

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

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

htmlcss

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Comparison between Login popups and Login pagesIt's time

Curious about the most effective approach for handling multiple login forms? Would you rather: A) Keep each form on a separate web page. B) Utilize modal popups with update panels. Weighing SEO considerations as well. Cheers! ...

c#htmlauthentication

PHP script redirects to its own URL successfully, but the functionality fails when triggered by CRON

I am facing an issue with a program that calls itself iteratively. redirect($_SERVER["PHP_SELF"]); function redirect($url,$seconds=0) { $html="<html><head><meta http-equiv='refresh' content='$seconds; URL=$url'>< ...

phphtmlcron

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

Arranging progress bars between various nodes using HTML and CSS

I am currently facing a challenge in creating a stepping wizard form layout that features a bar at the top of the page. This bar displays a dynamic number of steps (nodes) and progress bars that connect these nodes. However, I am encountering difficulties ...

htmlcsshtml-listsflexbox

Maximizing the potential of image srcset in HTML5

After configuring the img srcset as shown below: <img srcset="http://via.placeholder.com/320x150 320w, http://via.placeholder.com/480x150 480w, http://via.placeholder.com/800x150 800w" src="http://via.placeholder.com/8 ...

htmlsrcset

Using JavaScript to modify the -webkit-animation-play-state

Hello, I'm currently facing a challenge in changing my css3 -webkit-animation-play-state property from paused to running upon clicking on another div. Does anyone have any suggestions on how I can achieve this? I believe JavaScript might be the way to ...

javascriptcsswebkit-animation

Incorporating headers and footers on every page

I am looking to incorporate a header and footer on all my pages. I attempted to do this using jQuery, but unfortunately, it was unsuccessful. Since I am using nodeJS on the backend, do you have any recommendations for implementing this without causing an ...

htmlnode.js

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

css

Is it possible to make an element draggable after it has been prep

Seeking assistance with making a notification draggable when added to a webpage. The notifications are housed in a parent div named notification_holder Here is the structure: <div class="notification_holder"> <div class="container"><b ...

javascriptjqueryhtmljquery-ui

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Is there a way to restrict the Paste (Ctrl+V) and Copy (Ctrl+C) functions in a specific TextField within MaterialUI? I am currently working with ReactJs ...

javascripthtmlcssreactjsmaterial-ui

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

javascriptjqueryhtmlangularjsajax

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Style your content using PHP and CSS to format text with multiple selectors

My HTML code looks like this: <div id="main"> <aside class="readableCenterAside left"> ## Content 1 ## </aside> <aside class="readableCenterAside right"> ## Content 2 ## </aside> </div> Here is my CSS: .readableCe ...

htmlcsscss-selectors

Is there a way to make my red div switch its background color from red to green when I press the swap button?

How can I make the red div change its background color to toggle between red and green when I click on the swap button in the following code? $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready ...

javascriptjqueryhtmlcss

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Getting two child elements to be perfectly centered vertically

I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large ic ...

htmlcssdisplay

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Hey there, I'm diving into the world of JavaScript and have set myself a challenge to create a simple bingo number machine. Check out my CodePen project here. I've successfully generated an array of 20 numbers, shuffled them, and added a marker t ...

javascripthtmlcss