I have a list of songs, and I want to put the word "New!" to the left of the new songs like this:
How can I do this so that all the songs line up? I.e., I want the names of songs that aren't new to line up with the names of songs that are new, not with the start of the word "New"
Note that this is trivial if "New!" is an image. I.e., I set the image as the background-image of the <li> and give it some padding-left
<li>My song <span class="new">New!</span></li>
li {
position: relative;
}
li .new {
display: block;
width: 30px;
height: 10px;
position: absolute;
top: 0;
left: -40px;
background: url(../images/new.png) no-repeat; /* if you wanted to use an image */
text-indent: -9999px; /* as above */
}
This will have the added advantage that the page unstyled will show a small New next to new tracks.
Here's a way to do it with straight text. You have to play with the margin to get it to line up and it's going to change with each font, but you can get the main idea.
<html>
<head>
<style>
li.new:before {
content: "New! ";
}
li {
list-style: none;
}
li.new {
margin-left: -29pt;
}
</style></head>
<body>
<ul class="newlist">
<li>Bob Marley</li>
<li class="new">Ziggy Marley</li>
<li>Bob Dylan</li>
<li class="new">Jacob Dylan</li>
</ul></body>
</html>