How to display number/text outside of container

Question

I want to add some custom css/html to my site so that list posts (Top 10 best vacations, etc) have numbers that are outside of the column. For instance instead of the normal

|1. New York

|

|2. Florida

|

|3. Hawaii

|

I would like it to look like

1 |New York

|

2 |Florida

|

3 |Hawaii

|

I want the numbers to be really large, but not screw up the formatting of the text. I've seen places like the New York Times do this with quotes, images, etc.

I tried this code:

.list-number{
    display: block;
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7);
    font-size: 5.5rem;
    position: relative;
    left: -15px;
    width: 0;
    overflow: visible;
    z-index: 100000;
}

And it moved the number to the left, but the number disappeared as soon as it went off the container. It also left behind the paragraph of space where it would have been. I've been tinkering with this for an hour and I'm not sure what needs to change.

(When this is resized for mobile, I planning on @media query changing it to normal -- but haven't gotten that far yet.)

Answer 1

You can use this answer even for unordered list.

Use an item counter and place it before list item within ::before pseudo-element

li {
    width: 150px;
    background: orange;
    display: block;
    margin: 5px 0 5px 30px;
    padding: 5px;
    box-sizing: border-box;
}
ul {
  counter-reset: num;
}
li:before {
    counter-increment: num;
    content: counter(num);
    display: inline-block;
    position: relative;
    width: 20px;
    margin: -5px 20px -5px -25px;
    padding: 5px;
    color: yellow;
    background: green;
    text-align: center;
}

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 <li>item6</li>
 <li>item7</li>
</ul>