One-of-a-kind words in place of a numeric value

Is there a way to replace numbers with unique text of my own choosing? For example, instead of 1., 2., 3., I would like to use Bla, Blabla, Blablabla.

https://i.sstatic.net/kf0p4.jpg

<style>
#menu2 {
width: 320px;
}
#menu2 ol {
font-style: talic;
font-family: Georgia, serif;
font-size: 24px;
color: #bfe1f1;
}
#menu2 ol li p {
padding:8px;
font-style: normal;
font-family: Arial;
font-size: 13px;
color: #eee;
text-align:left;
border-left: 1px solid #999;
}
#menu2 ol li p em {
display: block;
}
</style>
<div id="menu2">
<ol>
  <li><p><em>Bla</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Blabla</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Blablabla</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
  <li><p><em>Cztery</em> Sed diam eu dui dolor, porttitor laoreet fermentum. Morbi laoreet, enim aliquam convallis. Donec ullamcorper, augue euismod convallis nisl. Etiam dictum sit amet tempus arcu.</p></li>
</ol>
</div>
htmlcss

Answer №1

This is a clever workaround..

To customize the text in place of numbers, start by removing the list style type.

ul {
    list-style-type: none;
}

Then, utilize the :before pseudo-element and :nth-child selector to pinpoint the elements.

In this case, content: " " represents the text that will appear before each item.

li:before {
    content: "wow";
    padding-right:10px;
}
li:nth-child(2):before {
    content:"awesome";
}
li:nth-child(3):before {
    content:"amazing";
}

Check out the jsFiddle demo here.

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

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascriptcssangularjsangular-ui-bootstrapcss-animations

Having trouble with Javascript? Your page unexpectedly resets

Hey there, I'm facing a confusing issue. I created a registration page for a project, and every time I enter the information, it should be stored in a cookie. After entering the information for the first time, I saw it in the bar, but it wasn't p ...

javascripthtml

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

What is the best way to replicate tags in selenium when an element has multiple class names?

Extracting information from a webpage where a significant amount of text was concealed behind the "see more" tab. Using selenium to click on all such buttons and then extracting data with beautifulsoup. However, some of these buttons have additional space ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

After clicking a button, my code dynamically adds content to a div and inserts buttons with names like "teamReq_"+index+"_AddYear" into the document (where index is a number retrieved from a hidden input field). If these buttons are spammed, multiple divs ...

javascripthtml

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

javascriptjqueryhtmlcssiframe

Python Automation: Saving Excel Files with Selenium

I'm on a mission to download an XLS file for each day of a specific month. However, when I use Chrome's developer tools to inspect the download button for the XLS file, it turns out that it's not actually a button at all. So how can I go abo ...

pythonhtmlseleniumweb-scrapingdownload

Positioning a file drop area discreetly hidden behind a cluttered data-packed table

I have been experimenting with the ngx-file-drop module for Angular 4. Lately, I have been working on adding a file drop feature to a website that displays data in a table using *ngFor and *ngIf directives. My goal was to create a background drop zone beh ...

htmlcssangular

Using jQuery to load and parse a JSON file stored on a local system

I am a beginner in scripting languages and recently searched for ways to load and parse JSON files using jQuery. I found helpful resources on Stack Overflow. The JSON file I am working with is called new.json. { "a": [ {"name":"avc"}, ...

javascriptjqueryhtmljson

Issue with Bootstrap 4: Dropdown menu extends beyond the edge of the screen towards the right side

I'm having trouble with the dropdown items extending off the page. I've tried a few solutions from BS3 but they don't seem to be working for me. I suspect it might have something to do with the ml-auto class. (please disregard the if-else st ...

twitter-bootstrapcssbootstrap-4

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions: The .has-error class has been renamed to .has-danger. However, I have found that this change does not seem to take effect. The border and text are not colored as expected. For instance: <div class="form-grou ...

twitter-bootstrapcssbootstrap-4

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

An HTML form featuring two unique submit style buttons designed for triggering two separate PHP actions or files

I'm facing a challenge with my HTML file upload form that sends files to a database using PHP. The current setup allows users to upload a file, preview the data in an HTML table, and then submit it to the database. However, I need to merge the preview ...

phphtmlsqlpost

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...

javascripthtml

Modifying colors with Jquery

Is it possible to use CSS within JQuery to gradually change the color of a div? Additionally, how can I incorporate a second function into my <div>? Below is the code. I would like the color to revert back to its original state when the mouseout ev ...

jquerycss

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

javascripthtmlcss

Tips for showcasing content with full width within a bootstrap container

Creating a carousel slider with CSS has been quite successful on Chrome, Firefox, and IE. Check out how it looks below: https://i.sstatic.net/u49Yc.png To make the slider fill up the screen within its container, I applied some tricks like this: margin-l ...

htmlcssbootstrap-4

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

javascriptcssangulartypescriptbootstrap-4

Confirm that the input into the text box consists of three-digit numbers separated by commas

Customers keep entering 5 digit zip codes instead of 3 digit area codes in the telephone area code textbox on my registration form. I need a jQuery or JavaScript function to validate that the entry is in ###,###,###,### format without any limit. Any sugge ...

phpjavascriptjqueryhtml

Automatically update the selection in an md-select dropdown

I am dealing with the following HTML structure <md-select id="testSelect" ng-model="objElements" ng-change="onElementChange()" name="objElements" placeholder="Select Stuff"> <md-option id="testOption" ng-r ...

htmlangularjsangular-material