HTML: Is there a way to set the
elements "value" to a string, not a number

Question

Hello SO,

I´m working with some complicated list structures, that need to be converted to HTML. Here is my problem:

The ordered lists do have fixed list-item values like this:

1. ...
2. ...
2a. ...
2b. ....

So my first idea was, to use the HTML-List-Elements "value" property. Like:

<ul>
    <li value="2">...</li>
    <li value="2a">...</li>
</ul>

But, as List-Element-Value only takes numbers it will print:

2. ...
2. ...

Is there any way to get the desired result within an <ol>-Element? Or do I have to create my own "list" with float and margins?

EDIT: To make things clear - I can not edit or reformat these list, as they are laws. For an example have a look on: https://www.gesetze-im-internet.de/stgb/__5.html

I can not simply use a nested element in this, as this is not the way the law is written.

Edit 2: The best thing I came up with by now is to give my <li> elements an attribute like data-li-value="2a." and in my css do something like:

[data-li-value]::before {
    content: attr(data-li-value) " ";
    float: left;
    margin-right: 2rem;
    margin-right: .5rem;
    margin-left: -.5rem;
}

While removing the default-list-style-type from the li element...

Thanks for any idea and help! :)

Hey...you see this link https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type @errori — Anshu, Jun 15 '19 at 12:45
I think this should answer your question: https://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working, basically you need to use a list for 1, 2 and so on, with a nested list, inside of the second `
Thanks for the links. I know these links but they wont help. I updated my question to clarify the issue. — errorinpersona, Jun 15 '19 at 12:54

score 0 · Answer 1 · answered Jun 15 '19 at 14:00

This solution appears to work for me:

<!DOCTYPE html>
<html>

<head>
    <title>Custom li item</title>
    <style type="text/css">

        ol {
            /* 
            This may be needed if the first item is not a section item

            counter-increment: counter;
            */
            counter-reset: counter;
            list-style: none;
        }

        .single-item:before {
            counter-increment: counter;
            content: counter(counter) ") ";
        }

        .section {
            counter-increment: counter;
            counter-reset: section
        }

        .section-item:before {
            counter-increment: section;
            content: counter(counter) counter(section, lower-alpha) ") ";
        }

    </style>
</head>

<body>
    <ol>
        <li class="section-item section">Part 1a</li>
        <li class="section-item">Part 1b</li>
        <li class="single-item">Part 2</li>
        <li class="single-item">Part 3</li>
        <li class="section-item section">Part 4a</li>
    </ol>

</body>

</html>

These links on CSS counters might prove helpful as well.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Ordered list (HTML) lower-alpha with right parentheses?

HTML: Is there a way to set the elements "value" to a string, not a number

1 Answers1

HTML: Is there a way to set the
elements "value" to a string, not a number