I want to automatically add the HTML character » (») to the left of each li element.
What would be the best practise?
I want the HTML to be:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
And it should display:
» item 1
» item 2
» item 3
I found the above answer didn't work for me, but the following does:
li:before{
content: "\00BB";
}
This uses the hexadecimal code for » instead.
A nice hexadecimal converter can be found here.
If you don't want the arrows to appear as content then why not go for a css background?
li { background: url("raquo.gif") no-repeat left center; }
Related
Complete HTML/CSS newbie here. This question came to me when I was editing HTML and tried to change a specific list to display as inline but did not want to affect every other list on the page.
I created a class to separate the list in question, the HTML/CSS is below:
li.shortcut {
display: inline;
margin-right: 10px;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
Is there a more efficient way to achieve the same thing? I am following a book but it is slowly becoming outdated so I am wondering what would be the current standard way of writing this if it already isn't.
When you want specific changes to children, think id or class on the parent.
ul.menu li { display:inline; ... }
and
<ul class=menu><li>...</li>...</ul>
try use CSS :nth-child() Selector like this
li.shortcut:nth-child(2) {
display: inline;
margin-right: 10px;
background-color:green;
}
<p>To navigate faster click on these shortcuts.</p>
<ul>
<li class="shortcut">Shortcut 1</li>
<li class="shortcut">Shortcut 2</li>
<li class="shortcut">Shortcut 3</li>
<li class="shortcut">Shortcut 4</li>
<li class="shortcut">Shortcut 5</li>
</ul>
or use another way you want source
I need to add text before a horizontal navigation menu at the first, second and third levels of links.
The levels are achieved using nested lists.
If I want place text before a level of links, is it considered bad practice to add the said text as a list item?
Example:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li{
float:left;
display:block;
margin-left:20px;
}
<ul>
<li>Some arbitrary text:</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I would say it goes against best practice, I would suggest doing
<span>Some Text:</span><ul>..</ul>
This keeps your html clean and more flexible.
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
This is pretty straightforward.
I have the following HTML structure:
<ul id="myContactList">
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
...
</ul>
and the trouble maker CSS:
ul#myContactList>li>ul>li {
float:left; /* Trouble maker */
}
Here's the JSFiddle.
Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?
Thanks in advance, cheers! :)
It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).
ul#myContactList>li>ul {
list-style-type:none;
padding:0;
overflow: hidden; /* New style, to clear the floats contained within */
}
The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.
Is it possible to make a vertical <ul> that displays the text on the left side of the list?
The only example I can think of would be something like the Facebook timeline where you would have list items on the right side like normal and then list items on the left that have the list items. How would I do a list like the list items on the left? (I understand that this isn't how the timeline is coded, but it's just the only visual example I could think of).
Yes...use CSS:
<style>
ul {direction: rtl;}
</style>
If you'd like to alternate left and right, you can put it into a class:
<style>
.bulletonleft { direction:ltr; }
.bulletonright { direction:rtl; }
</style>
<ul>
<li class="bulletonleft">Element 1</li>
<li class="bulletonright">Element 2</li>
<li class="bulletonleft">Element 3</li>
<li class="bulletonright">Element 4</li>
<li class="bulletonleft">Element 5</li>
<li class="bulletonright">Element 6</li>
</ul>