user3169905 user3169905 - 23 days ago 7
CSS Question

Change style of list numbers

I want to left-align an ordered list and also change the style of the list numbers in that ordered list. Here is my CSS:

.tour-features ol {
text-align:left;
}

.tour-features ol > li:before {
font-size: 24px;
font-family: impact, sans-serif;
}


Here is how I'm calling it in the HTML

<ol class="tour-features">
<li>Check out our suggested Egypt Tours.</li>
<li>Contact us for a free quote today.</li>
<li>Let us customize any tour just for you.</li>
</ol>


And it's not working. Here's my Codepen showing the result. Nothing changes. No left-alignment of the list and no change to the default look of the numbers in the ordered list.

I'm sure it's something simple. I'm just not seeing it.

Answer

You had your css as .tour-features ol instead of ol.tour-features and you have to play with the padding-left as below.

/*ol.tour-features {
    padding-left: 15px;
}

ol.tour-features > li {
    font-size: 24px;
    font-family: impact, sans-serif;    
}*/

ol.tour-features {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
}
ol.tour-features > li {
	position:relative; /* Create a positioning context */
	margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
	padding:4px 8px; /* Add some spacing around the content */
	list-style:none; /* Disable the normal item numbering */
	border-top:2px solid #666;
	background:#f6f6f6;
}
ol.tour-features > li:before {
	content:counter(li); /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	/* Position and style the number */
	position:absolute;
	top:-2px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right:8px;
	padding:4px;
	border-top:2px solid #666;
	color:#fff;
	background:#666;
	font-weight:bold;
	font-family:"Helvetica Neue", Arial, sans-serif;
	text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
<ol class="tour-features">
    <li>Check out our suggested Egypt Tours.</li>
    <li>Contact us for a free quote today.</li>
    <li>Let us customize any tour just for you.</li>
</ol>