CSS Only Partial Width Borders

A design that I was recently implementing required a partial width underline for some headings and a partial height border as a divider between two elements.

But I didn’t want to add any extra elements to the DOM to get there. Because, well... why would I want to add non-semantic elements if it can be avoided?

The solution I came up with is pretty simple really. It uses a :before to handle positioning and sizing the border.

.partial-border: { display: inline-block; position: relative; } .partial-border:before { content: ’’; position: absolute; bottom: 0; width: 80%; left: 10%; /*this centers it based on the above width*/ border-bottom: 1px solid lightcoral; } 

That pretty much does the trick... no extra markup and partial width borders.

The position: relative on the parent is to allow its width to dictate the width of the absolutely positioned pseudo element. Other then that it’s pretty self-explanatory.

If you want to play around with this yourself it is on codepen. Enjoy!