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

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

Grid element not displaying properly as intended

I'm having trouble centering the content of item in the middle column, it just won't budge. .home-grid-container { display: grid; grid-template-columns: auto; grid-template-rows: 0.10fr 0.98fr auto; height: 100vh; } .home-header { g ...

htmlcsscss-grid

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Issue encountered when attempting to connect an external script to a Vue single file component

Struggling to link an external script to a single file component in Vue. My project setup is as follows: I need to link the file components/Sshy to ../javascripts/ I have successfully linked other scripts using either of these methods before: ../javasc ...

javascripthtmlvue.jswebpackvuejs2

Navigating Back to the Previous Page After Accepting an Alert Popup in Selenium

My testing process involves using Selenium with Python on a test page. Here is what happens during the test: First, I have page A open and then I click on a link that triggers the opening of page B. Upon submitting a form on page B, an alert popup ap ...

pythonhtmlseleniumwebdriverautomated-tests

JavaScript multi-click navigation menu

I'm relatively new to JavaScript and I've been struggling with using multiple onClick attributes. While I have some code that works, I feel like there might be a simpler and cleaner solution to my problem. What I'm trying to achieve is a na ...

javascriptjqueryhtmlcssnavigationbar

Can you explain the purpose of the search_/> tag used in this HTML code?

I came across this code snippet while working on creating a customized new tab page for Firefox. <input class="searchBar search_google" type="text" name="q" placeholder="Google" search_/> However, I'm confused about the search_ ...

htmlformssearchwebinput

Embracing the balance of a gradient backdrop

I'm looking to create a gradient background for my page that transitions from light blue in the center to dark blue on the sides in a symmetrical way. I've tried using a linear gradient that goes from left to right, but it doesn't achieve th ...

htmlcss

Issue with closing the active modal in Angular TypeScript

Can you help me fix the issue with closing the modal window? I have written a function, but the button does not respond when clicked. Close Button: <button type="submit" (click)="activeModal.close()" ...

htmlangulartypescript

Position the Bootstrap Button on the right side of the navbar

Hey there, I'm completely new to the world of HTML/CSS and this is my first project ever. I welcome any constructive criticism that can help me improve in the future. Now onto my current dilemma: I've decided to use Bootstrap because it seems u ...

htmlcsstwitter-bootstrap

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss

alter the property of the vec2 variable

In my vertex shader, I am attempting to alter the attribute vec2 a_position variable that is also used in the fragment shader. This modification is intended to achieve a cylindrical projection of an image. Here is the code snippet from my shaders: <! ...

htmlcanvaswebglprojection

I'm curious why this is happening. Is it due to the default padding or margin property?

I am currently working on a website project. The genre navigation menu is located in the bottom left container, and I had to use a negative margin property to position the li elements correctly. However, there seems to be an unexpected top padding of aro ...

htmlcss

Issue with overlay functionality after updating to jQuery version 1.12.1

Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...

javascriptjqueryhtmlajaxjquery-ui

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Trying to execute the code below on a Wix website using "Embed HTML", but IFRAME is blocking scripts. Seeking help to embed custom HTML with JavaScript on platforms like Wix.com or Wordpress.com, as the embedded code is not functioning due to IFRAME restri ...

javascripthtmlwordpressiframevelo

Is there a way to display the button only when the user is able to enter an email in the input field?

I have a form for users to update their profile and a button to delete their account. I want the delete account button to only be visible if the user enters their email. $(document).ready(function() { var user_email = $('input[name="emp_email"]&a ...

javascripthtmljquery

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Automatically organize <mat-list-item> elements within a <mat-list> container

Here is the code snippet: <div> <mat-list fxLayout="row" dense> <mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings --> <button mat-button> ...

htmlangularangular-material

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

javascriptjqueryhtmltwitter-bootstrap