Creating a fake ordered list - html

Question

I have a site which lists the line of succession to the British crown. As the line of succession is an ordered list, the main part of the site is in an <ol>.
However, there's a wrinkle. People occasionally drop out of the line of succession (most commonly for marrying a Catholic). For example, see Prince Michael of Kent is listed as 16th in line on 1978-06-29, but the next day he has vanished from the list as he married a Catholic on that date.
Currently, as you see, I just drop people from the list when they are excluded from the succession. But actually, I'd like to include them, but use a "dimmed" typeface for their entries in the list. But that gives me another problem. I can then no longer use an ordered list as excluded people don't have a position in the succession. So I need to omit the number from some items in an ordered list.
So I'm looking for the best approach to simulate an ordered list, but with the ability to omit the numbers on some list items. I have a few ideas:
Switch to a <ul> and add my own numbers. Can I style it to remove the bullets and outdent the numbers?
Switch to just using outdented paragraphs.
Use a table with a very narrow first column.
But I wonder if there's a CSS and/or HTML trick that I'm missing. Is there any easier way to achieve what I'm looking for?
Update: The current HTML looks like this:
<ol>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">The Prince Charles, Prince of Wales</span>
<br><span class="small">Age 69
(born <a title="Line of Succession on 14 November 1948" href="/1948-11-14">14 November 1948</a>),
<br>Son of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince William, Duke of Cambridge</span>
<br><span class="small">Age 35
(born <a title="Line of Succession on 21 June 1982" href="/1982-06-21">21 June 1982</a>),
<br>Grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Prince George of Cambridge</span>
<br><span class="small">Age 4
(born <a title="Line of Succession on 22 July 2013" href="/2013-07-22">22 July 2013</a>),
<br>Great grandson of the sovereign</span></li>
<li itemscope itemtype="http://schema.org/Person"><span itemprop="name">Princess Charlotte of Cambridge</span>
<br><span class="small">Age 2
(born <a title="Line of Succession on 02 May 2015" href="/2015-05-02">02 May 2015</a>),
<br>Great granddaughter of the sovereign</span></li>
...
</ol>
The CSS is all standard Bootstrap 4.0. Oh, except this bit:
span.small {
font-size: 75%;
}

Answer 1

You can use css counters. Also you have to add a class to the omitted element.
Stack Snippet
ul {
font: 13px Verdana;
list-style: none;
counter-reset: list;
padding: 0;
}
ul>li:not(.disable):before {
counter-increment: list;
content: counter(list) ": ";
position: absolute;
left: 0;
}
ul>li {
position: relative;
padding-left: 20px;
}
ul>li.disable {
opacity: .5;
}
<ul>
<li>Text</li>
<li>Text</li>
<li class="disable">Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>

Answer 2

You could use css counters
ol {
counter-reset: item;
list-style: none;
margin: 0;
padding: 0;
}
ol li {
display: block;
padding: 0 0 0 2.5em;
margin: 0;
position: relative;
}
ol .counted:before {
content: counters(item, ".") " ";
counter-increment: item;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 2.5em;
}
ol .level1>li {
margin: 0;
padding-left: 0;
}
ol .level1>.counted:before {
left: -2.5em;
font-weight: normal;
}
ol .level2>.list-item {
padding-left: 2.5em;
}
ol .level2>.list-item:before {
left: -1em;
width: 3.5em;
}
.not-counted {color:green;}
<ol>
<li class="counted">
this is counted
<ol class="level1">
<li class="counted">
this is counted
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
<ol class="level2">
<li class="counted">
this is counted
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
</li>
</ol>
</li>
</ol>
</li>
<li class="not-counted">
this is not counted
</li>
<li class="counted">
this is counted
</li>
</ol>