1px Line Background Without Gradient

Like many of you out there, I’m always trying to find the most efficient way to do something. I was looking around to see how I can use CSS3 gradients to make a 1px line in the middle of my content and sidebar backgrounds for my WordPress theme. Kind of going for a timeline feel if you know what I mean.

I found a few different options on Stackoverflow and of course Chris Coyier always as great tutorials on CSS-Tricks, but to nail down the 1px line with a gradient consistently at all widths seemed to be impossible because, if you recall, gradients are built with stops and percentages:

You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px. -FunctionalFunctions on Stackoverflow

So whats the main reason we're going for the gradient instead of just uploading an image or sprite? For me it's trying to be as high-resolution as possible and use math instead of pixels whenever able. But when it comes down to it, in this case we're just talking about one single pixel. It doesn't matter how much you zoom in or change screens, that 1 px line is always going to be a solid single colored straight line. So if high-resolution is your reason, then using a 1x1px square png in your background and repeating it doesn't ruin the integrity of your retina-ready design. Heck, you don't even have to upload it. Just use a placeholder image generator like placehold.it or dummyimage.com and link to it like so:

 .sidebar-primary { 
   background-image: url(http://placehold.it/1/eee); 
   background-repeat: repeat-y; 
   background-position: calc(50% - 1px);
 }

And there you have it. Single line background smack dab in the middle. But if your anything like me, when your on a quest to find a solution you've got see it through. So after some dabbling in the Chrome inspector, I realized I hadn't tried pseudo-classes.

.sidebar-primary {
	position: relative;
	z-index: 0;
}

.sidebar-primary:before {
	background-color: #ddd;
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(50% - 1px);
}

Beauteous. It worked for me. Got to keep my math-only design chops in tact.

There are a couple caveats to keep in mind. Make sure you are setting the content equal to nothing (""). Obviously, set the background-color for the line to your liking. Since we are using absolute positioning, make sure the parent class of the pseudo-class has its position set to relative as shown. Otherwise your 1px line will be lost in browser space somewhere. Setting the z-index to "-1" on the line and "0" on the parent class will give you the ability to have a wrap class within cover it with a background color, giving you more options for your design.

So thats my solution for the 1px line background without using images or a gradient. Let me know what you think of it and if you've found any better ways to achieve your look.