Wie eine römische Zahl in einer geordneten HTML-Liste unterstrichen wird

Question

Ich arbeite am Front-End-Projekt und es gibt eine Anforderung für geordnete Liste, die einige Überschriften anzeigen. Aber mein Kunde muß unterstrichen angezeigt werden, die römische Zahl von Stil Art und Titel deckt in <li> dies für die Seite mein HTML-Code ist:

<ol type="I"> 
 
    <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>

Ich brauche einen Text in li Block anzuzeigen deshalb verwende ich <p> tag und <span> tag für unterstrich zweck

Answer 1

so etwas wie das?

ol{ 
 
    list-style-position: inside; 
 
} 
 
li{ 
 
    position: relative; 
 
} 
 
.underlined{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 0px; 
 
    border-bottom: 1px solid; 
 
    margin: 0px; 
 
} 
 
.underlined span{ 
 
    padding-left: 25px; 
 
} 
 
.text{ 
 
    padding-left: 25px; 
 
}

<ol type="I"> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
    <li> 
 
     <p class="underlined"><span>some underlined text</span></p> 
 
     <p class="text">some text</p> 
 
    </li> 
 
</ol>

Answer 2

können Sie

verwenden

.list { 
 
    counter-reset: my-badass-counter; 
 
} 
 
.list dt{ 
 
    border-bottom: 1px solid red; 
 
} 
 
.list dt:before { 
 
    content: counter(my-badass-counter, lower-roman); 
 
    counter-increment: my-badass-counter; 
 
    padding-right: 10px; 
 
}

<dl class="list"> 
 

 
\t <dt>list head 1</dt> 
 
\t <dd>list data 1</dd> 
 
\t 
 
\t <dt>list head 2</dt> 
 
\t <dd>list data 2</dd> 
 
\t 
 
\t <dt>list head 3</dt> 
 
\t <dd>list data 3</dd> 
 

 
</dl>

Answer 3

Ein schmutziger Trick ist CSS-Zähler zu verwenden, und dann positionieren absolut die Zähler (innerhalb eines ::before`` pseudo-element). To force the underline to extend towards the text, you will have to insert an arbitrary amount of whitespace, in this case I use the em space, represented as platziert \ 2003 in Unicode

Dieser Trick funktioniert in dem Sinne, dass multiline Inhalt unterstützt, siehe das Proof-of-Concept-Beispiel unten. Außerdem habe ich gerade so zeigen die Optik eine andere Farbe für den Zähler Text verwenden gewählt:

ol { 
 
    counter-reset: listCounter; 
 
    list-style: none; 
 
} 
 
ol li { 
 
    padding-left: 2rem; /* Some arbitrary spacing */ 
 
    position: relative; 
 
} 
 
ol li::before { 
 
    color: #ff0000; 
 
    counter-increment: listCounter; 
 
    content: counter(listCounter, upper-roman) "\2003\2003\2003"; 
 
    display: inline-block; 
 
    text-decoration: underline; 
 
    position: absolute; 
 
    left: 0; 
 
    max-width: 2rem; /* Must match the left padding above */ 
 
    overflow: hidden; /* Hide overflowing underline */ 
 
} 
 
ol li span { 
 
    text-decoration: underline; 
 
}

<ol type="I"> 
 
    <li><span>Non-Canadian Investors</span> 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
    <li><span>This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title</span> 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>

Answer 4

Wenn Sie auch den Text zu unterstreichen wollen, dann nur text-decoration hinzu: unterstreichen; Regel .custom-counter li Sie das gewünschte Ergebnis wie dies erreichen können:

.custom-counter { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.custom-counter li { 
 
    counter-increment: step-counter; 
 
    margin-bottom: 10px; 
 
} 
 

 
.custom-counter li::before { 
 
    content: counter(step-counter, upper-roman); 
 
    text-decoration: underline; 
 
    padding: 3px 8px; 
 
}

<ol class="custom-counter"> 
 
    <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also 
 
    <p>Cce or information to anyone </p> 
 
    </li> 
 
</ol>