Photoshop Question posted in
The official user guide can be found here.

css effect line under area – Photoshop

i’m new to front end developpement, and i have created a design in photoshop, i’m porting it to html/css, but i have a little problem :

enter image description here

i want to add the bottom line that is a little darker when the element is in hover

here is my code

css :

#global_left_nav ul{
    list-style-type: none;    
    font-family: "Lobster1";
    font-size: 20px;
    color: #5a4e4e;
}


#global_left_nav ul li{
    background: #2e2828 url("images/diagonal_pattern.png") repeat;
    background-blend-mode: multiply;

    width: 200px;
    height: 50px;

    position: relative;

    text-align: center;
    margin-bottom: 30px;
    line-height: 44px;
    padding: 0;
}

#global_left_nav ul li:hover {
    color: #c43a3a;
    text-shadow: 1px 0px 0px #000,
        0 1px 0 #000;
}

html :

<nav id="global_left_nav">
        <ul>
            <li>Acceuil</li>
            <li>Forum</li>
            <li>Event</li>
            <li>Live</li>
            <li>Equipes</li>
        </ul>
    </nav>
Tags:

3

Answers


  1. 0

    Try this : 

    #global_left_nav ul li:hover { border-bottom: 2px solid #000; }

    By the way, it’s “Accueil” not “Acceuil” 😉

    Login or Signup to reply.
  2. 0

    You can add a border-bottom property to your li:

    #global_left_nav ul li:hover {
    color: #c43a3a;
    text-shadow: 1px 0px 0px #000, 0 1px 0 #000;
    border-bottom: 3px solid #000000;
}

    This adds a 3px line in black to your ul when it’s hovered.

    Login or Signup to reply.
  3. 0

    Try this:

    #global_left_nav ul li:hover {
  border-bottom: 5px solid #000;
  height: 45px;
}

    Here is live example:

    https://jsfiddle.net/hv81rb5u/3/

    This will give you the desired effect, and also, the buttons will not be “jumping” when you hover on them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search