4

I'm trying to apply linear-gradient to border-bottom on hover to an <a> but it didn't work 100% My aim is to make this with HTML and CSS only if possible.

Here is my code:

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  content: '';
  position: absolute;
  left: -50%;
  right: 0%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
  border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  transition: all 0.5s linear;
  bottom: 0;
  opacity: 0;
}
a:hover:after {
  border-right: 25vh;
  right: 0%;
  opacity: 1;
}
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

As you can see the border-bottom is not in the center and is not suitable for the width of the <a> width.

2 Answers 2

3

You can use the same technique described here : Expand bottom border from center on hover with two box-shadows to create the fade out effect on the left and right edges :

a {
  font-size: 30px;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding-right: 3%;
  padding-bottom: 3%;
  position: relative;
  display: inline-block;
}
a:after {
  display:block;
  content: '';
  height:4px;
  background:#019fb6;
  transform: scaleX(0.0001);  
  transition: transform 250ms ease-in-out;
  box-shadow: inset -40px 0px 30px -25px #fff, inset 40px 0px 30px -25px #fff;
}
a:hover:after {
  transform: scaleX(1);
}
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

Note : You need to insert vendor prefixes to maximize browser support (see canIuse).

8
  • thanks for the answer . here some questions: 1- how can I make the space between the word and the bottom-border because padding-bottom is not working....... 2- transition is not working with safari even when I add -webkit- any idea? Thank Dec 8, 2015 at 11:17
  • @MohammedMoustafa 1/ you can add margin-top to the pseudo element or line-height to the a. 2/ can you share the code you tested in safari please.
    – web-tiki
    Dec 8, 2015 at 11:19
  • -webkit-transform: scaleX(0.0001); .................... -webkit-transition: transform 250ms ease-in-out;........... -ms-transform: scaleX(0.0001); .......................... -ms-transition: transform 250ms ease-in-out;................ transform: scaleX(0.0001); ................................ transition: transform 250ms ease-in-out;....................... Dec 8, 2015 at 11:27
  • @MohammedMoustafa ok, you are missing the -webkit- prefix in the -webkit-transition declaration, see this : jsfiddle.net/webtiki/fn1yb3gb
    – web-tiki
    Dec 8, 2015 at 11:31
  • 1
    @MohammedMoustafa first, that version is very outdated. Second it doesn't support transitions on pseudo elements so you need to add another element (like a span) and put the transition on that element.
    – web-tiki
    Dec 8, 2015 at 14:09
3

You can also do this with linear-gradient by adding it as a background-image. For this to work, the background image should be positioned at the centre-bottom of the element and its size should initially be set to 0% in X-axis. On hover the size should be transitioned to 100% in the X-axis. The gradient's size in the Y-axis is the thickness of the border.

In this method you don't require any extra elements but browser support for gradients is lower than the support for box shadows. Linear gradients work only from IE10+.

a {
  display: inline-block;
  padding-right: 3%;
  padding-bottom: 3%;
  color: #666;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);  
  background-image: linear-gradient(to right, #f0f0f0, #8c8b8b, #f0f0f0);
  background-position: 50% 100%;
  background-size: 0% 4px;
  background-repeat: no-repeat;
  transition: all 0.5s linear;
}
a:hover {
  background-size: 100% 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  <a href="#">First</a> 
  <a href="#">Second</a> 
  <a href="#">This is the third</a> 
</div>

As mentioned in the Can I Use - Notes, Safari doesn't support to [side] syntax for linear gradients and so add the below line for Safari support.

background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

(Don't forget to add -webkit-transition also depending on the browser version).

5
  • Thanks it's nice to do it that way and I'm happy with your code, But unfortunately is not working on safari any idea? Dec 8, 2015 at 11:38
  • Yes it dose, but the translation effect is not applying on IE 11.0.25 thanks alot for your effort. Dec 8, 2015 at 14:40
  • @MohammedMoustafa: That seems to be a known issue in IE11. background-size is not an animatable/transitionable property upto that version of IE. Upto IE11, it would degrade gracefully and produce the border without transition. In Edge, it works perfectly fine.
    – Harry
    Dec 8, 2015 at 14:46
  • Do you know any js file I can get to support all old versions of all browsers or most command browsers? Dec 8, 2015 at 14:49
  • 1
    @MohammedMoustafa: Nope, supporting all versions of all browsers is impossible. I would say this approach already has reasonable browser support and a graceful fallback. Any further tweaks/hacks would only complicate it further.
    – Harry
    Dec 8, 2015 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.