Transform Arabic numerals into Roman numerals using only CSS styling

Currently developing a custom theme for a website and faced with the restriction of not being able to use Javascript. My goal is to translate certain numbers into Roman numerals.

I attempted the following:

.score:before {
  counter-reset: mycounter attr(score number, 0);
  content: counter(mycounter, upper-roman) " ";
}
 <p><span class="score" score="11">points</span></p>

Unfortunately, it appears that "attr(score number, 0)" always evaluates to 0. This issue persists even when I change the fallback number to 42 - the result remains at 0. The problem doesn't seem to be elsewhere in the code, as it functions correctly when I replace attr(...) with a hardcoded number like 42.

Why does this code fail to display the expected outcome?

htmlcssroman-numeralscss-contentcss-counter

Answer №2

To ensure proper values are passed to your css files and counter, consider using the var method. Here is an example:

.points {
   counter-increment: my-awesome-counter 0;
   counter-reset: my-awesome-counter var(--data-score);
}

.points:before {
  content: counter(my-awesome-counter, upper-roman);
  margin-right: 5px;
}
<p><span style="--data-score:11" class="points" score='11'>points</span></p>

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

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

javascriptjqueryhtmlcss

Concentrate on all elements within the form

I am in the process of developing a form with multiple input fields, one of which is shown below. I am interested in triggering an event using jQuery's focusout function. The form goes by the name: form_test <form id="form_test"> <input ...

javascriptjqueryhtml

Strategies for detecting changes in multiple HTML select elements with jQuery

I currently have three select HTML tags and I would like to filter my table using the selected values (group of selected tags) with an AJAX request. For example, filtering by Gender, Location, and Season. My question is how can I achieve this without dup ...

jqueryhtmlajaxselect

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

javahtmlangulartypescript

Show the Table and Conceal the Overflow

Currently, I am experimenting with creating an Img hover for entertainment purposes. However, I have added some text to my div. In order to center the text beautifully within my div, I utilized the following CSS code: display: table-cell; vertical-align: ...

htmlcssoverflowvertical-alignment

What is the best way to remove CSS styling from a select element?

My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet: <label for="accountBrokerageName">Brokerage:</label> <se ...

htmljquerycss

Error with website navigation menu

I am facing an issue where everything on my website works perfectly, except when I visit /treatments/manage_your_skin.php Once I navigate to that page and try to return to the homepage, it shows an error. This is because my website is searching for /treat ...

html

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

htmlcsssvg

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

What could be causing the space under every row in my CSS? I am currently developing a tic-tac-toe application using Next.js to enhance my skills. However, I have encountered an issue with the CSS where there appears to be a small space underneath each bo ...

cssnext.js

How can grid be used in CSS/HTML to create two collapsible columns that are side-by-side, maintain equal width, and keep their size when expanded?

Hello all, I'm new here and I have a question that I hope I can explain clearly. I am currently working on creating two collapsible "buttons" positioned side by side (each taking up half of the screen width), which expand when clicked to reveal an equ ...

htmlcsscss-grid

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...

jqueryhtmlcssbindunbind

How do I hide a dropdown menu when the selector's value changes in iOS6?

I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...

javascriptjqueryioshtmlibm-mobilefirst

Incorporating smooth sliding animation to ng-repeat elements

Our team has developed a custom widget in ServiceNow that displays a row of icons and reveals or hides additional details in a div when icons are clicked. Below is the structure of our html and client controller: <div class="icons"> <ul class=" ...

cssangularjscss-transitionsservicenow

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...

htmlcssreactjsfrontendmaterial-ui

Unable to interact with menu in Internet Explorer

I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, th ...

htmlcssdrop-down-menu

Combining images with PHP

I have a collection of numerous images that are all the same size in terms of width and height. In total, there are over 50 unique images. My goal is to combine these images along both the horizontal (X) and vertical (Y) axes. Specifically, I would like ...

phphtmlimageimage-processingimage-manipulation

When selecting an option triggers a pop-up in JavaScript

Implementing javascript and HTML. Consider this example: <select name='test' > <option value='1'> <option value='2'> <option value='3'> </select> If the user selects optio ...

javascripthtmlselectpopup

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

CSS only rendering in Firefox, not displaying in other browsers

After all the hard work I put into my website, I have encountered an issue while conducting browser compatibility checks. There seems to be something strange happening with the CSS of a specific link. I have applied a CSS class and included some PHP code ...

phphtmlcsscross-browser