Adding A Bottom Border On Hover, Css Only

August 21, 2024 Post a Comment

How can I make a line appear only on the bottom of a linked image when hovered? I can get an inner border to display on hover, but I only want border-bottom to display. Here is wha

Solution 1:

One option to get the same result without affecting the size of your link (borders append to the outside of the element) is to use an inset box-shadow.

Which in your example would be to change your a:hover to the following:

#linksa:hover { 
    box-shadow: inset 0 -10px00 cyan; 
}

You can see the fiddle here: https://jsfiddle.net/kLLxkdw4/

Solution 2:

Just assign the border-bottom property on :hover:

#linksa:hover{
    border-bottom: 3px solid #00f; /* or whatever colour you'd prefer */outline: 3px solid black;
}

If the phrase 'anchored image' should be taken to mean the img is within the a element, then I'd suggest:

#linksa:hoverimg {
    border-bottom: 3px solid #00f; /* or whatever you'd prefer */
}

Solution 3:

Try this code I just wrote specially for you. This solution answers your question about adding a border-bottom on :hover. It even goes far beyond that and changes the background of the whole #link element on :hover as well with CSS transitions.

A DEMO ON CODEPEN

HTML Markup

<divid="links"><ahref="#">Example Link</a></div>

CSS Effets & Transitions

#linksa{
  color:#fafafa;
  text-decoration:none;
  background-color:#8b0000;
  padding:15px;
  border-radius:5px;
  font-size:1.3em;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;

}
#linksa:hover{
  background-color:#fff;
  color:#002f5b;
  border-bottom:5px solid #002f5b;
}

Solution 4:

If you want it to work with an img inside your a, you can use a pseudo-element on the anchor, and then apply the border to that. Also. To avoid the border from appending to the outside of the link, you should use an inset box-shadow instead:

a {
  display: inline-block;
  position: relative;
}

a:hover:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  box-shadow: inset 0 -20px0#11c0e5;
}

aimg {
  display: block;
}

<ahref="#"><imgsrc="http://oi65.tinypic.com/241jlzk.jpg"/></a>

Solution 5:

Put your image in a div and add a mask div.

#mask {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 3px solid transparent;
}
#mask:hover {
  border-bottom: 3px solid cyan;
}
#outerDiv {
  display: inline-block;
  position: relative;
}
img {
  display: block;
}

<divid='outerDiv'><imgsrc="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=32&d=identicon&r=PG" /><divid='mask'></div></div>

Html5 Academy