CODEWITHSUNDEEP
htmlcss
sansSpoon
sansSpoon

Reputation: 2185

Outdent List Items using Counters

I'm using counters and the pseudo:before selector to add decimal numbers to an ordered list. The problem is that counters effect the li's paragraph, not its outdented item number.

Does anybody know how I might be able to outdent a counter so that the remaining paragraph doesn't flow to it's left margin?

<html>
<head>
    <style>
        ol.lvl1 > li:before {
            content: "16."counter(chapter);
            margin-right: 20px;
        }
        ol.lvl1 > li {
            display: block;
            counter-increment: chapter;
        }
    </style>
</head>
<body>
<h1>16 Bacon Ipsum</h1>
<ol class="lvl1">
    <li>Bacon ipsum dolor amet swine pig jerky leberkas flank, short ribs drumstick landjaeger frankfurter pork loin. Pancetta sausage pork loin, tenderloin cupim ham kevin brisket. Doner turkey cupim salami, landjaeger picanha pork chop short ribs ball tip:
        <ol type = "a">
            <li>Turkey short ribs alcatra, pancetta pastrami capicola spare ribs. Meatball short loin salami kielbasa filet mignon bacon ball tip turducken.</li>
            <li>Jowl filet mignon picanha short loin:
                <ol type ="i">
                    <li>Pig shankle prosciutto, shoulder chuck jowl frankfurter alcatra sirloin flank brisket</li>
                    <li>Sausage andouille biltong tri-tip short loin cupim ground round tail strip steak sirloin flank swine pork belly chicken</li>
                </ol>
            </li>
            <li>Ham flank cupim ham hock boudin andouille venison pig prosciutto tail filet mignon jowl. Rump pastrami leberkas ball tip chicken bresaola, prosciutto turkey beef andouille venison ham tri-tip.</li>
        </ol>
    </li>
    <li>The Employee may terminate the Employment by giving the Employer the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
    <li>The Employer may terminate the Employment by giving the Employee the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
</ol>

<h1>17 Turkey</h2>
</body>

sample flow of paragraph

Upvotes: 2

Views: 236

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206024

Position the :before pseudo absolute at right: 100% (of the relative LI parent), than to add some extra space you can do margin: 10px;

ol.lvl1 > li:before {
  content: "16."counter(chapter);
  position: absolute;
  right:100%;
  margin-right:10px;
}
ol.lvl1 > li {
  position:relative;
  display: block;
  counter-increment: chapter;
}
<h2>16 Bacon Ipsum</h2>
<ol class="lvl1">
    <li>Bacon ipsum dolor amet swine pig jerky leberkas flank, short ribs drumstick landjaeger frankfurter pork loin. Pancetta sausage pork loin, tenderloin cupim ham kevin brisket. Doner turkey cupim salami, landjaeger picanha pork chop short ribs ball tip:
        <ol type = "a">
            <li>Turkey short ribs alcatra, pancetta pastrami capicola spare ribs. Meatball short loin salami kielbasa filet mignon bacon ball tip turducken.</li>
            <li>Jowl filet mignon picanha short loin:
                <ol type ="i">
                    <li>Pig shankle prosciutto, shoulder chuck jowl frankfurter alcatra sirloin flank brisket</li>
                    <li>Sausage andouille biltong tri-tip short loin cupim ground round tail strip steak sirloin flank swine pork belly chicken</li>
                </ol>
            </li>
            <li>Ham flank cupim ham hock boudin andouille venison pig prosciutto tail filet mignon jowl. Rump pastrami leberkas ball tip chicken bresaola, prosciutto turkey beef andouille venison ham tri-tip.</li>
        </ol>
    </li>
    <li>The Employee may terminate the Employment by giving the Employer the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
    <li>The Employer may terminate the Employment by giving the Employee the period of written notice specified in Item 10 of Schedule 1 or subject to clause 4 Probation.</li>
</ol>

Upvotes: 1

Related Questions