Issue
I thought this would be an easy thing, but I haven't found a good solution (maybe I'm also using the wrong search terms).
I would like to style an ordered list so the items appear so:
1
Item one
2
Item two
3
Item three
Is there any way to do this simply with CSS?
Many thanks in advance!
Solution
You can use the content property with the :before pseudo-element and the \a
newline escape:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL Test</title>
<style type="text/css">
li:before {
content: "\a";
white-space: pre;
}
</style>
</head>
<body>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
</body>
</html>
That should work fine on browsers that support CSS 2.1.
Answered By - Frédéric Hamidi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.