Dots to page number

HTML & CSS
1

What is the best way to create this:

Test Page................................................................24

Should I use border-bottom: dotted 1px black to achive this or is there some other way to do it?

Best regards,
@marklenon95

2

I think CSS is the way to go with this as it’s not actual content.

2 Likes
3

Hi there marklenon95,

here is one possible solution for you to try…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>dots between spans</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

div {
    max-width: 64em;
    margin: 1em auto;
    background-color: #fff;
    background-image: url(http://coothead.co.uk/images/dot.png);
    background-size: auto  100%;
    background-repeat: repeat-x;
    background-position: center 0;
    line-height: 1.62em;
    overflow: hidden; 
 }

div span {
    float: left;
    padding: 0  0.2em;
    background-color:#fff;
 }

div span:last-of-type{  
    float: right;
 }
</style>

</head>
<body> 

 <div>
  <span>Test Page</span>
  <span>24</span>
 </div>

</body>
</html>

coothead

2 Likes
4

Here’s a very old demo (that I’ve just chucked into codepen) that is similar but may be of interest although it’s a little more complicated than coothead’s above.

It will work well with text that needs to wrap and the right hand items stay on the bottom line.

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.