CODEWITHSUNDEEP
htmlcssborder
SamFisher83
SamFisher83

Reputation: 3995

Is there a way to set border line height?

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.

Upvotes: 3

Views: 8256

Answers (3)

ScottS
ScottS

Reputation: 72261

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

Upvotes: 3

sosuke
sosuke

Reputation: 131

There isn't a method to set anything other than the width, style, and color of a border. If you want to make a border appear to be a different height than the text you need to add an element between those two elements and adjust its height and vertical alignment that way. You might be best off with a background image depending on what code you're working with.

Upvotes: 0

JNF
JNF

Reputation: 3730

That would be connected to the height of the element itself - not the border.

Upvotes: 0

Related Questions