• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Better Dotted CSS Borders Using The :After Pseudo Selector

General · May 18, 2012

As a developer you’re sometimes given a web design that has certain elements that theoretically can be done with CSS, but don’t look quite the same. One of those I recently discovered isn’t quite the same are dotted borders. If your designer uses Photoshop as their web design tool of choice, there’s a high chance any dotted borders in a design are in fact decimals, styled text.

While not all designers would care if their dotted borders don’t look the same, like I did recently the difference can really affect a design. I came up with a crafty solution that allows you to create dotted CSS borders the Photoshop way. This only works if it’s a line on top or bottom, not a dotted border that wraps around an element.

The following code is what I recently used on a project, tweak to suit your tastes:

[code]

/* This is most likely a DIV element that uses this class, but it can be anything */

.dotted-rule {

/* Probably unneeded if the element using this class is a DIV */
display: block;

/* This helps stop the element being taller than it should be */
line-height: 1;

/* A space of 5px top and bottom of our dotted border */
margin: 5px 0 5px 0;

/* Overflow hidden will stop the :after pseudo dots extending past the width of our element. */
overflow: hidden;

/* We don’t want any padding */
padding: 0;
}

/* Inserts a whole bunch of dots after the dotted rule element */
.dotted-rule:after {

/* The colour of our border */
color: #FFF;

/**
* Use as many dots here as you like, I put more than I need and let the overflow: hidden above restrict it to only display the width of the element.
* Try experimenting with different characters for awesome borders like triangles or something, be creative.
*/
content: ‘………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………’;

/* This is very important, our text won’t flow or display correctly without it */
display: block;

/* Letter spacing helps space out our dots. It controls the distance between them. */
letter-spacing: 3px;

/**
* A negative margin will most likely be needed to bring the rule border up an acceptable position, otherwise by default it might sit lower.
* This negative margin matches the amount of margin we’ve put on-top of the dotted rule above.
*/
margin-top: -5px;
}

[/code]

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
The1Path
The1Path
9 years ago

This was useful. The problem with using the standard dotted border styling is that the dots do not match up. So the symmetry is lost. This keeps it looking nice and symmetrical but I found that the negative margin did nothing to help me get the dots in the correct place.

0
Tomas
Tomas
5 years ago

Very nice idea, thanks ๐Ÿ™‚

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • Thoughts on the Flipper Zero
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 ยท Dwayne Charrington ยท Log in

wpDiscuz