I want to put highlights around text, with a lefthand and righthand margin on the highlight. So the result would be:
It would not be:
Here is what i have so far:
ol.number {
list-style-type: none;
}
ol.number {
counter-reset: number;
background-color:#FFFF00;
margin-left: 0.5em;
margin-right: 1em;
}
ol.number > li:before {
content: "(" counter(number, decimal) ") ";
counter-increment: number;
}
<ol class="number">
<li>one</li>
<li>quadrillion</li>
</ol>
Any idea to fix this?
Give the ol tag a display of inline-block. Then give it padding to the left and right:
ol.number {
list-style-type: none;
counter-reset: number;
background-color: #FFFF00;
padding: 0 8em 0 2.5em;
margin-right: 1em;
display: inline-block;
}
ol.number>li:before {
content: "(" counter(number, decimal) ") ";
counter-increment: number;
}
<ol class="number">
<li>one</li>
<li>quadrillion</li>
</ol>
Use this for example:
<div style="100px"><p><span style="background:yellow;padding-left:10px;padding-right:10px">one</span></p></div>
You can change the size of the div so it fits your needs.
Related
I want to create a custom numbering style for an ordered list that immitates footnotes.
However, when I do this, via an li::before pseudoelement (see snippet below), if there is a whitespace between the <li> tag and its actual content in the HTML code, there is a space rendered between the custom number and the item content.
What do I have to do to get rid of the whitespace, or at least make it behave consistently (i.e. it always is or is not there), regardless of whether there is one in the HTML code?
ol {
list-style: none;
counter-reset: x;
}
ol li {
counter-increment: x;
}
ol li::before {
content: counter(x);
vertical-align: super;
font-size: smaller;
}
<ol>
<li>no leading space</li>
<li>
leading space
</li>
<ol>
Let's normalize it to be with white space. For all the good reasons. This is done by adding " " to the counter(x) content.
ol {
list-style: none;
counter-reset: x;
}
ol li {
counter-increment: x;
}
ol li::before {
content: " " counter(x) " ";
vertical-align: super;
font-size: smaller;
}
<ol>
<li>no leading space</li>
<li>
leading space
</li>
</ol>
Picking up on #IT goldman's answer: If you don't want that "normalized" space, you could still do it that way, but add position: relative; and a negative rightsetting to the ol li::before rule to move the number towards the beginning of the li contents:
ol {
list-style: none;
counter-reset: x;
}
ol li {
counter-increment: x;
}
ol li::before {
content: " " counter(x) " ";
vertical-align: super;
font-size: smaller;
position: relative;
right: -0.2em;
}
<ol>
<li>no leading space</li>
<li>
leading space
</li>
</ol>
May I know is it possible to create something like this :
1. Food
1.1 Vege
a. Carrot
i. White Carrot
ii. Red Carrot
1.2 Meat
a. Chicken
b. beef
2. Beverages
I've seen many solution for mixed list with numbers and alphabets, but I can't make something like this which include number,nested number, alphabet, roman characters using simpler css code.
Refer to the solution on jsFiddle for this question, it only able to create nested number, but without alphabet and roman characters.
Below is what I did (to fake the effect) :
.primary {
list-style-type: none;
counter-reset: item;
margin: 0px;
padding: 0px;
}
/* Direct child under ol */
.primary>li {
counter-increment: item;
}
/* Before direct child under ol */
.primary>li:before {
content: counters(item, ".") ". ";
padding-right: 0.6em;
}
.primary>li li {
margin: 0px;
}
/* Before li of second level ol */
.primary>li li:before {
content: counters(item, ".") " ";
}
/* Third level ol */
.pri-inner {
list-style-type: lower-alpha;
padding-left:20px;
}
/* Hide the counter content on third level */
.pri-inner li:before {
content:none;
display:none;
}
/* Fourth level ol */
.pri-inner2{
list-style-type: lower-roman;
padding-left:25px;
}
The sample html code look like this
<ol class="primary">
<li>First
<ol class="primary">
<li>Inside First</li>
<li>
<ol class="pri-inner">
<li>Inside inside
<ol class="pri-inner2">
<li>Maximum inside</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>Second</li>
</ol>
So, is there any better way to achieve that? Because I have to hide the counter on 3rd level.
counter() accepts a second parameter for the list type, i.e. counter(item, lower-alpha)
So the following CSS could do it, or could be tweaked to use your class names.
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li {
margin: 0;
}
li li:before {
content: counters(item, ".") " ";
}
li li li:before {
content: counter(item, lower-alpha) ". ";
}
li li li li:before {
content: counter(item, lower-roman) ". ";
}
http://jsfiddle.net/eke4afd8/
I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:
For now, each <li> contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.
Here is my code as of now.
HTML:
<ol class="dinosaurs">
<li><a>Dinosaur</a></li>
<li><a>Tyrannosaurus</a></li>
<li><a>Camptosaurus</a></li>
</ol>
CSS:
.dinosaurs{
list-style-position: inside;
}
NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.
This seems to work:
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before {
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
}
You could position the list elements like so:
.dinosaurs {
list-style-position: inside;
}
.dinosaurs li{
position: relative;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
which would yield http://jsfiddle.net/wBjud/2/
None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:
ol {
counter-reset: item;
}
li {
display: block;
margin-left: 1.7em;
}
li:before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
margin-left: -1.7em;
}
Which looks like this: https://jsfiddle.net/b3dayLzo/
I think it works by putting the li:before in the left margin of the li.
You may want a different margin-left.
There's no class on the ol because in my case this appears within the style of the container.
Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.
You can fake it by using positioning, padding and margins.
jsFiddle example
.dinosaurs {
list-style-position: inside;
position:relative;
margin-left: -20px;
}
a {
position:absolute;
left:70px;
}
If you use list-style-position: inside; the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.
ol {
list-style: none;
counter-reset: step-counter;
padding-inline-start: 25px;
}
ol > li {
counter-increment: step-counter;
}
ol > li:before {
content: counter(step-counter)".";
display: inline-block;
position: absolute;
margin-left: -25px;
}
To keep your bullets also to the left
ul {
list-style: none;
padding-inline-start: 25px;
}
ul > li:before {
content: '\25cf';
position: absolute;
margin-left: -25px;
}
Is it possible to arrange the ol list numbers (2 digit numbers) to start from the left side.
Usually it comes like this
1
2
.
.
10
12
But I need that to show like this
May be you can use counter -increment for this. Write like this:
ul{ counter-reset: chapter 0; }
li:before{
counter-increment: chapter;
content:counter(chapter) ". ";
width:20px;
display: inline-block;
text-align: right;
}
Check this http://jsfiddle.net/upc6b/
You can use CSS counters:
CSS:
ol {
padding-left: 40px;
list-style: none;
counter-reset: number;
}
ol li:before {
display: inline-block;
content: counter(number) '.';
counter-increment: number;
width: 30px;
}
The only problem with this approach is that the width of the number area is fixed, so it will not expand as the number of elements grows.
Demo: http://jsfiddle.net/Blender/UG5Y4/2/
Quite simply, I want an ordered list to work like this:
1. Foo
2. Bar
3a. Baz
3b. Qux
4. Etc...
Is there any way to easily do something along these lines in HTML?
Given the following mark-up:
<ol>
<li>Foo</li>
<li>
<ol>
<li>bar</li>
<li>baz</li>
</ol>
</li>
<li>Something else...</li>
</ol>
The following CSS almost works:
ol {
counter-reset: topLevel;
}
li {
counter-increment: topLevel;
margin-left: 1em;
}
li::before {
content: counter(topLevel) '. ';
margin-right: 0.3em;
}
ol ol {
counter-reset: secondLevel;
}
ol ol li {
counter-increment: secondLevel;
}
ol ol li::before {
content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}
JS Fiddle demo.
The only problem with this, so far, is that it contains the topLevel count against both the inner li elements (as you wanted), but also against the outer li (that contains those inner elements), so...not quite there, yet.
And the above problem resolved! ...in those browsers that support the CSS :not() selector:
ol {
counter-reset: topLevel;
}
li {
counter-increment: topLevel;
margin-left: 1em;
}
li:not(.hasChild)::before {
content: counter(topLevel) '. ';
margin-right: 0.3em;
}
ol ol {
counter-reset: secondLevel;
}
ol ol li {
counter-increment: secondLevel;
}
ol ol li::before,
ol li.hasChild ol li::before {
content: counter(topLevel) counter(secondLevel, lower-alpha) '. ';
}
JS Fiddle demo.
I forgot (originally) to note that for this to work (because CSS doesn't have a parent selector (as yet) I had to add a specific class to those li elements with child ol elements in order to appropriately hide the duplication of the number. In this case I chose the class-name .hasChild (as can be seen in the Fiddle).
Incidentally, a small change to the li:not(.hasChild)::before rules, allows for the right-aligned text:
li:not(.hasChild)::before {
content: counter(topLevel) '. ';
width: 2em;
margin-right: 0.3em;
display: inline-block;
text-align: right;
}
JS Fiddle demo.
It doesn't meet your requirements fully and requires some (annoying) changes to your html, but I think it's about as close as you'll get.
http://jsfiddle.net/qGCUk/30/
<ol>
<li>one</li>
<li class="has_children">
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
</ol>
ol,li{
padding:0;
margin:0;
}
ol { counter-reset: item }
li { display: block; padding-left: 0 }
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
LI.has_children:before {
content: " ";
counter-increment: item
}
This is only numbers, as I don't think you can mix numbers and letters. And since there is no selector to select and li which contains and ol, you have to add a class to any li which has a child ol.