CODEWITHSUNDEEP
htmlcss
userden
userden

Reputation: 1693

Can I make border-bottom look narrower than <div>?

On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS: 

.active {
  text-decoration: none;
  border-bottom: 4px solid #888;
}

Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?

Here is the HTML

<ul class="nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="about.html">About</a></li>
</ul>

Upvotes: 2

Views: 1177

Answers (3)

King King
King King

Reputation: 63387

The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:

/* span is your menu item here */
span {
  font-size:20px;
  padding:4px;
  cursor:pointer;
}
span:hover {
  background:linear-gradient(red,red) no-repeat;
  background-size:60% 4px;
  background-position:center bottom;
}

Demo.

Upvotes: 3

mpcabd
mpcabd

Reputation: 1807

Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.

Check this fiddle: http://jsfiddle.net/6QfNs/

Upvotes: 4

web-tiki
web-tiki

Reputation: 103810

A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.

BUT

You can use a pseudo element, set the border on it and give it the desired width :

DEMO

CSS :

.active:after {
    content:'';
    display:block;
    width:20px;
    border-bottom: 4px solid #888;
 }

Upvotes: 4

Related Questions