CODEWITHSUNDEEP
css
ChristinaD
ChristinaD

Reputation: 94

CSS ol - How to place my css border inbetween the numbers and the text of a increment list?

Issues:
1. I want the css border to be in-between the Numbers (bullets) and the text of an increment list, like this image (which I can do on a list before adding increment settings):


I imagine issues 2 & 3 below would also be automatically solved if the border is between the Numbers and the text (?):
2. Wrapped lines are not behaving like a list; not indented to be even with the line above it.
3. The Numbers (bullets) are too close to the text. If I add for example padding:6px; to #list ol li:before it makes Issue 2. above worse; wrapped text begins before the Numbers (bullets).

Thank you kindly for your time and input
Here on JSFiddle https://jsfiddle.net/29rf4a09/
And below:

#list3 ol li { 
counter-increment: mycounter;
padding:8px; font-style:normal;
font-family: 'Helvetica';
font-size:15px;
border-left: 1px solid #000000; 
height: 100%;}
#list3 ol.start { counter-reset: mycounter; }

#list3 ol.continue { /*counter-reset: mycounter 2; */}
#list3 ol li { 
counter-increment: mycounter;
list-style-type: none;
padding:8px;
font-style:normal;
font-family: 'Helvetica';
font-size:15px;
border-left: 1px solid #000000; 
height: 100%;}
#list3 ol li:before { content: counter(mycounter) ". "; font-family:'Impact'; font-size:17px; padding:6px;}
<div id="list3">
<span class="pihead2">A</span>
  <ol class="start">
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi. Duis malesuada justo ac enim dapibus sollicitudin. Integer in arcu mauris. Etiam id neque ut libero iaculis </li>
  </ol>
<span class="pihead2">B</span>
  <ol class="continue">
    <li>Fusce id mi id dui congue tempor quis sed nisi.  </li>
</ol>
<span class="pihead2">C</span>
  <ol class="continue">
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
  </ol>
</div>

Upvotes: 0

Views: 295

Answers (2)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

Small edits with css like this:

    #list3 ol li:before { 
    content: counter(mycounter) ". "; 
    font-family:'Impact'; 
    font-size:17px; 
    padding:6px;
    position: absolute;
    line-height: 0px;
    left: 20px;
   }

Upvotes: 1

Cyril Beeckman
Cyril Beeckman

Reputation: 1278

You can try someting like this :

Just add position: absolute to your ::before pseudo element and position: relative on the parent.

Now play with position for your numbers with left and top

#list3 ol li { 
  counter-increment: mycounter;
  padding: 8px; 
  font-style:normal;
  font-family: 'Helvetica';
  font-size:15px;
  border-left: 1px solid #000000; 
  height: 100%;
}

#list3 ol.start { 
  counter-reset: mycounter; 
}

#list3 ol.continue { 
  /*counter-reset: mycounter 2; */
}

#list3 ol li { 
  counter-increment: mycounter;
  list-style-type: none;
  padding:8px;
  font-style:normal;
  font-family: 'Helvetica';
  font-size:15px;
  border-left: 1px solid #000000; 
  height: 100%;
  position: relative;
}

#list3 ol li:before { 
  content: counter(mycounter) ". ";
  font-family:'Impact';
  font-size:17px;
  padding:6px;
  position: absolute;
  left: -30px;
  top: 0;
}
<div id="list3">
<span class="pihead2">A</span>
  <ol class="start">
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi. Duis malesuada justo ac enim dapibus sollicitudin. Integer in arcu mauris. Etiam id neque ut libero iaculis </li>
  </ol>
<span class="pihead2">B</span>
  <ol class="continue">
    <li>Fusce id mi id dui congue tempor quis sed nisi.  </li>
</ol>
<span class="pihead2">C</span>
  <ol class="continue">
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
    <li>Fusce id mi id dui congue tempor quis sed nisi.</li>
  </ol>
</div>

Upvotes: 1

Related Questions