Issue
What is a nice way to do leading dots in a table of contents with CSS?
Example:
Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3
Solution
Taken from this article on Leader Dots with CSS:
The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.
Here is the CSS:
.dots { background: url('dot.gif') repeat-x bottom; } .field { background-color: #FFFFFF; }
To apply this to the example form, you would just use it as:
<div class="dots"> <span class="field">LastName</span> </div>
Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png
Demo in Stack Snippets
.dots {
background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom;
}
.field {
background-color: #FFFFFF;
}
.link {
width: 150px;
display: inline-block;
}
<div class="row">
<div class="dots link">
<span class="field">Link</span>
</div>
<span class="chapter">
Chapter 1
</span>
</div>
<div class="row">
<div class="dots link">
<span class="field">Link</span>
</div>
<span class="chapter">
Chapter 2
</span>
</div>
<div class="row">
<div class="dots link">
<span class="field">Link</span>
</div>
<span class="chapter">
Chapter 3
</span>
</div>
Answered By - Justin Gregoire
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.