Is there a way to set border line height?

border, css, html

Solution

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;}

Problem

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.

Original source

Related problems