CODEWITHSUNDEEP
htmlcss
Jason King
Jason King

Reputation: 104

Centre a:hover border and specify width of border

Hoping someone could let me know if this is possible as I have searched and couldn't come up with the desired effect I wanted.

I basically want to have the border hover to be centred so when you mouse over the links the border-bottom is centred. I would like the border width to be a fixed size around 20px and centered.

As you can see its really basic so far and the jsfiddle is here: http://jsfiddle.net/pCQLN/3/

I want something like shown in the below image:

enter image description here

Thank you for any time you can spare!

Here's my code;

HTML

<div id="wrap">
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</div>

CSS

#wrap {
    width:40em;
    height:3em;
    margin:0 auto;
}
#nav {
    float:right;
    width:75%;
}
#nav ul {
    display:inline;
    list-style: none;
    float: right;
}
#nav li {
    float: left;
    width:50px padding-right:1em;
}
#nav a {
    text-align:center;
    text-decoration:none;
    color: #888;
    font-size:1em;
    float: left;
}
#nav a:hover {
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

Upvotes: 2

Views: 1497

Answers (3)

Jeffpowrs
Jeffpowrs

Reputation: 4550

You can try something like this:

<li><a href="#">Home</a><span class="hovered"></span></li>


.hovered {
   margin: 0;
   height: 3px;
   width: 20px;
   background-color:transparent;
   display: inline-block;
}

#nav a:hover + .hovered {

    background-color: black;
}

http://jsfiddle.net/pCQLN/9/

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Use :after pseudo selector in combination with hover pseudo selector.

#nav a:hover:after{
    content: "";
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
    border-bottom:3px solid #000;
}

Working Fiddle

Upvotes: 8

Jacques
Jacques

Reputation: 3774

Add a span, center it and give it the bottom border inside your a. Show on hover.

jsfiddle

<div id="wrap">
    <div id="nav">
      <ul>
          <li><a href="#">Home<span class="line"></span></a></li>
        <li><a href="#">About<span class="line"></span></a></li>
        <li><a href="#">Projects<span class="line"></span></a></li>
        <li><a href="#">Blog<span class="line"></span></a></li>
      </ul>
    </div>
    </div>

Upvotes: 1

Related Questions