CODEWITHSUNDEEP
htmlcss
RA19
RA19

Reputation: 819

CSS3 center triangle on hover HTML

I am trying to center my css triangle to the middle of each navigation item when I hover over it. At the moment the triangle is under the front letter of each item. How do i do this?

If i remove position: absolute, it removes my triangle shape. How can i fix this?

.current {
  color: #FFF;
  text-decoration: underline;
}

nav a:hover:after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  bottom: 0px;
}
<header>
  <a href="#" id="logo"></a>
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Upvotes: 1

Views: 1100

Answers (2)

Dave Ranjan
Dave Ranjan

Reputation: 2984

You can try making your <a> relative and then making your nav a :hover :after relative. I've added margin-top to push the arrow down, its up to you now to figure out some way to do that, withoout hardcoding it. :)

a {
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 position: relative;
}

nav a:hover:after {
    content: "";
    display: block;
    border: 8px solid #405580;
    border-bottom-color: #fff;
    position: absolute;
    left:33%;
    margin-top: 5px;
}

https://codepen.io/daveRanjan/pen/yXyWwR

Upvotes: 1

wlh
wlh

Reputation: 3525

Since you have created your triangle as an :after pseudo-element, you can make it's position relative to nav a. Keep position: absolute on the triangle, just adjust it's bottom positioning to how you want it. Create a new style element for nav a and add to it position: relative. See below.

.current {
  color: #FFF;
  text-decoration: underline;
}

nav a {
   position: relative;
}

nav a:hover:after {
  content: "";
  display: block;
  border: 8px solid #405580;
  border-bottom-color: #fff;
  position: absolute;
  left: 50%;
  bottom: -16px;
}
<header>
  <a href="#" id="logo"></a>
  <nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Upvotes: 0

Related Questions