I'm using wordpress and I want my bullets to appear like
i)
ii)
iii)
its the brackets actually that I'm looking for.
[ Edited & fixed. Thanks, Mike Miller! ]
You can use CSS counters :)
ul {
counter-reset: items 0;
}
li {
list-style-type: none;
}
li:before {
counter-increment: items 1;
content: counter(items, lower-roman) ") ";
}
You can see live how this works at http://dabblet.com/gist/2724823
I think the best you can do is
li:before { content: ")" };
And then set a negative left margin.
If the specific numbering style is essential, make it part of the content and either suppress default browser-generated numbers or don’t use ul markup at all, e.g.
<div>i) first item</div>
or (if you may need to style the numbers
<div><span class=num>i)</span> first item</div>
You can alternative generate the numbers using CSS (generated content and :before pseudoelements), but it’s clumsier, especially if you need to ensure reasonable presentation on all browsers.
Related
How do you change the language in which a CSS counter displays when using alphabetical characters?
.outer {
counter-increment:question;
}
.inner {
content:counter(question, lower-alpha) ".";
}
Use one of the list-style-type settings (there's a whole list on that MDN page):
li {
content:counter(question, lower-alpha) ".";
list-style-type: lower-armenian;
}
http://jsfiddle.net/543aL6my/
Which gives:
Note that the case will follow whatever the list-style-type is, even though you've passed it to counter().
You could just add a language selector to target different languages:
inner:lang(it) {
content:counter(question, lower-alpha) ".";
}
obviously you'd need to also modify markup but it souldn't be too difficult.
I have three links in a row, and I want the third one to be on the next line, and normally I would use
.new-line { display:block; }
But if I do that, the link is 100% the width of the next line and if you move your mouse on the line, you will see all of it is clickable (even if not hovering over the actual word link).
And in this case, I also have content in the :before that needs to appear inline with the actual content of the link.
So it is:
.new-line:before { content: 'something'; }
I am not able to add extra mark up (HTML nor jQuery) in this example.
Is there a way with CSS to make the third element be on the next line?
Here is a JSFIDDLE with the exact markup that I am trying to achieve this.
http://jsfiddle.net/2Fkev/3/
Thanks for any tips
Try this CSS:
.new-line:before {
content: ' ';
display: block;
}
Let me know if it's useful.
This will definitely solve your problem, but check for the compatibility issues
.new-line {display:table-cell; }
Here is jsFiddle
If you can allow yourself, the perfect solution would be:
a{
float:left;
margin-left:5px;
}
.new-line { clear:both; }
I need to create a style for ordered lists that follows this format:
(a) List Item 1
(b) List Item 2
(1) List Item 2.1
(2) List Item 2.2
(i) List Item 2.2.1
(ii) List Item 2.2.2
Unfortunately, list-style-type doesn't work because there are no options that show the numbers as listed above, with parentheses.
LOTS of researching has brought about nothing but ugly hacks, for example:
ol {
list-style-type: none;
}
ol>li:before {
content: "(" counter(lvl1, lower-alpha) ") ";
}
ol li {
counter-increment: lvl1;
}
ol ol>li:before {
content: "(" counter(lvl2, decimal) ") ";
}
ol ol>li {
counter-increment: lvl2;
}
ol ol ol>li:before {
content: "(" counter(lvl3, lower-roman) ") ";
}
ol ol ol>li {
counter-increment: lvl3;
}
which works to some extent, removing the list numbering with list-style-type: none; and inserting the number surrounded with parentheses at the beginning of the li. This makes modifying other related styling horrific, as I can't figure out how to line things up nicely etc (I don't think its even possible). It also makes list-style-position redundant, because the numbers are ALWAYS inside the li.
Basically, I'm looking for a way to reproduce this kind of list numbering in CSS: (note text alignment etc)
ANY help VERY MUCH appreciated!!
You're almost there.
Since you're removing list-style, you can restore the position of the counters by applying padding to the list items and then pulling the counters into that padding with a negative margin (or one of many similar techniques e.g. hanging indent)
li {
padding: 2em;
}
li:before {
/* Take counter out of flow and pull it into padding space */
float: left;
margin-left: -2em;
}
You also need to sprinkle some counter-reset into the mix for each level of ol nesting.
JSFiddle showing a full working example with all the nesting code here: http://jsfiddle.net/thefrontender/tzzbh/2/
I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher than the counter value from the last element of the previous list. Is there some CSS magic that will do this?
While Su's answer would work, you don't need to be so heavy-handed. Just reset the counter at the top, and everywhere you use it, it will increment.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
see this example
Not quite with just CSS. It does provide you with some control over counters (and support is pretty good), but it's still static in it's behavior. So this works:
<html>
<head>
<style>
#list-one {
counter-reset : item;
}
#list-two {
counter-reset : item 3;
}
li {
display : block;
}
li:before {
display : inline-block;
content : counter(item) ". ";
counter-increment : item;
}
</style>
</head>
<body>
<ol id="list-one">
<li>One</li><li>Two</li><li>Three</li>
</ol>
<ol id="list-two">
<li>Four</li><li>Five</li><li>Six</li>
</ol>
</body>
</html>
…but you can't just drop two lists after each other and have the second one automatically pick up where the other left off(see the "3" in the second CSS rule). With a little creativity, though, you could probably wrap the counter-reset styling with a bit of PHP or whatever you're using to build your site. This is dependent upon the particulars of your situation, of course.
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}