vertical line called code example
Example 1: vertical line
ul {
counter-reset: list;
border-left: 2px solid lightgrey;
margin: 1em;
padding: 0;
}
ul li {
list-style: none;
margin: 0 0 0.5em 0;
padding: 0;
}
ul li:before {
display: inline-block;
width: 1.2em;
height: 1.2em;
margin: 0 0.5em 0 -0.65em;
border-radius: 50%;
content: counter(list);
text-align: center;
background: lightgrey;
counter-increment: list;
}
Example 2: vertical line
const data = [1, 2, 3, 4, 5, 6];
const Demo = ({ items }) => (
<ul>
{
items.map(key => (
<li key={key}>item{key}</li>
))
}
</ul>
);
ReactDOM.render(
<Demo items={data} />,
demo
);