Question

You can control the width of a border using the border-right-width property. Is there a way to set the height of it like a border-right-height?

For example:

Home|About

But I want the | to be a little shorter.

Answer 1

You cannot set the border property as you desire. However, using a pseudo element may be useful here (see exaggerated live example):

HTML (possible–other configurations are possible also)

<div class="menu"><span>Home</span><span>About</span><span>Last</span></div>

CSS

.menu span {font-size: 2em; padding: 10px; position: relative;}

.menu span:after {content: ''; position: absolute; right: 0; top: .6em; bottom: .6em; width: 1px; background-color: black;}

.menu > span:last-child:after {display: none;}