Search code examples
htmlcsshyperlinkhovercss-shapes

CSS Triangle Under Link On Hover (WITHOUT UL/LI/SPAN)?

I am pulling my hair out trying to do what should be a very, very simple effect. Here's what I want this to look like :

CSS triangle under link

When you hover over a text link, I want a small orange triangle to appear under this line. All of the responses I have found use ul and li to make this work, but that is not how I have my code set up and will not work for what I'm doing.

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

  <div class="row"><div class="large-9 large-centered columns show-for-medium-up rectangle">&nbsp;</div></div>

I'm building this site using foundation 4. Because I want my links set up a certain way and I want this white line under my links, I can't use the ul/li method to get the triangle hover, or even a really good display: block; method I found but wouldn't work for me at all. I figure if I duplicate this section under those two sections:

<nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
      <div class="small-3 columns">
        <div class="arrow"></div>
      </div>
    </div>
  </nav>

That this should work. This is the css I currently have.

.mainnav a {
font-family: "Quicksand", Verdana, sans-serif;
color: #8cc63f;
font-size: 1.75em;
}
.mainnav a:hover {
color: #c97932;
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #c97932;
margin: 25px auto;
display: none;
}
.mainnav a:hover + .arrow {
display: block;
}

Clearly the display: block; method can't work because these items aren't side by side. Please help with this! I already had to give up on the sliding js animation I wanted this to do because I couldn't figure it out... :( Thank you in advance!

Allow me to clarify a bit with this line with the class of rectangle. This is all it is, but it has to go between the links and the area the triangle appears. This is why the ul/li method will not work.

.rectangle {
    height: 1.5px;
    background-color: #fff;
    position: relative;
    // margin: 1% 0% 3% 0%;
}

Working Fix for my Issue!

HTML

  <nav class="row mainnav">
    <div class="large-7 large-centered columns show-for-medium-up">
      <div class="small-3 columns underline">
        <a href="#">Work</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">About</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Contact</a>
      </div>
      <div class="small-3 columns underline">
        <a href="#">Blog</a>
      </div>
    </div>
  </nav>

CSS

   .mainnav {
    height: 100px;
  }

  .mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
  }

  .mainnav a:hover {
    color: #c97932;
  }

  .mainnav a, .mainnav a:hover{ text-decoration:none;}
  .mainnav a:hover:after {
    display: block;
    position:relative;
    top:10px;
    width:100%;
    height:0;
    text-align:center;
    content : "\25B2";
    color: @orange;
  }

  .underline {
    margin: 10px 0px; 
    padding: 5px 0px;    
    border-bottom:2px solid #fff;
    overflow:visible;
  }
Solution

  • You probably do want to use display:block;, however, you need to position the element so that it is below the line.

    .mainnav a:hover + .arrow {
    display: block;
    position: relative; /* you could also try 'absolute' here */
    top: -50px; /* this will be how far down you want the triangle */
}

    Edit:

    I created a JSFiddle to demonstrate. I had to add some CSS definitions so that the rest of it would show up like described.

    For posterity, here are the relevant rules:

    .mainnav a, .mainnav a:hover{ text-decoration:none;}
.mainnav a:hover:after {
    display: block;
    position:relative;
    width:100%;
    text-align:center;
    content : "\25B2";

    color:yellow;
}

.columns {float : left; margin:10px;}

    content : "\25B2"; inserts the unicode ▲. This can be substituted of course with a background-image: url(...) or whatever you need it to be.

    Edit 2:

    See this version of the JSFiddle. Instead of putting the border on the a (which caused a weird ever-expanding width issue), I put it on the div which wraps the a and added margin and padding to that div, then gave the "arrow" a height: 0; so that the box would not expand on :hover.

    Here is the complete solution:

    .mainnav a {
    font-family:"Quicksand", Verdana, sans-serif;
    color: #8cc63f;
    font-size: 1.75em;
}
.mainnav a:hover {
    color: #c97932;
}
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #c97932;
    margin: 25px auto;
    display: none;
}
.mainnav a, .mainnav a:hover {
    text-decoration:none;
}
.mainnav a:hover:after {
    display: block;
    position:relative;
    top:5px;
    width:100%;
    height:0;
    text-align:center;
    content :"\25B2";
    color:#c97932;
}
.columns {
    float : left;
    margin:0;
    padding:5px 10px;
    border-bottom:1px solid #f00;
    overflow:visible;
}
    <nav class="mainnav">
    <div>
        <div class="columns"><a href="#">Work</a></div>
        <div class="columns"><a href="#">About</a></div>
        <div class="columns"><a href="#">Contact</a></div>
        <div class="columns"><a href="#">Blog</a></div>
    </div>
</nav>