This is a unique situation. On the website , the list within the `
- ` tags are annotated using the `:before` pseudo-element for chart labels (ABC and image). I have used adjacent sibling selectors in my CSS code to achieve this effect:
#profiletext ol li:before {
content: 'A';
}
#profiletext ol li+li:before {
content: 'B';
}
#profiletext ol li+li+li:before {
content: 'C';
}
#profiletext ol li+li+li+li:before {
content: '';
}
#profiletext ol li+li+li+li {
background: url('/wp-content/themes/paz2010/images/sweet-spot.png') no-repeat;
margin-left: 0;
padding-left: 38px;
}
#profiletext ol li {
height: 30px;
margin-left: 10px;
}
For a visual demonstration of the issue, you can view a screen recording at:
I am seeking advice on why this behavior occurs in Chrome 10 and how I can rectify it. Additionally, if there is a more efficient way to achieve the same result, any guidance would be greatly appreciated.