Geek asks and answers

Is there any way to set the height of the border line?

You can control the width of the border using the border-right-width property. Is there any way to set its height as a border with the right height?

For instance:

Home | ABOUT

But I want | be a little shorter.

+3
source share
3 answers

You cannot set the property borderon your own. However, using a pseudo-element may be useful here ( see Exaggerated Live Example ):

HTML (maybe - other configurations are possible)

<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;}
+3
source

This will be related to the height of the element itself, and not to the border.

0
source

There is no way to set anything but the width, style, and color of the frame. If you want the border to be of a different height than the text, you need to add an element between these two elements and adjust its height and vertical alignment in this way. You might be best off using a background image depending on what code you are working with.

0
source

More articles:


All Articles