CODEWITHSUNDEEP
cssborderopacitycss-variables
Taras Gordienko
Taras Gordienko

Reputation: 161

How to set opacity for the border with CurrentColor?

I customize the link. I want the border-color to depend on the color. For this I use CurrentColor.

How to make border-bottom with opacity 0.5?

a {
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid CurrentColor;
}
<a href="/">Some link</a>

I have one solution, but I'm not sure that it is the best.

a {
  text-decoration: none;
  color: blue;
  background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;
  background-size: 10px 1px;
}
<a href="/">Some link</a>

This solution doesn’t work.

a {
  --color: blue;
  
  text-decoration: none;
  color: var(blue);
  border-bottom: 1px solid rgba(var(--color), 0.5);
}
<a href="/">Some link</a>

Upvotes: 3

Views: 5448

Answers (2)

Temani Afif
Temani Afif

Reputation: 272591

With CSS variables you need to do something like this:

a {
  --color: 0,0,255;
  
  text-decoration: none;
  color: rgb(var(--color));
  border-bottom: 1px solid rgba(var(--color), 0.2);
}
<a href="/">Some link</a>

For the gradient solution you may create two gradients. A bottom one with the currentColor and a top one with the background color (white in this case) and adjust the opacity of the top one to control the opacity of the bottom one:

a {
  text-decoration: none;
  color: blue;
  background-image: 
   linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
   linear-gradient(CurrentColor, CurrentColor);
  background-position:bottom;
  background-size:100% 1px;
  background-repeat:no-repeat;

}
<a href="/">Some link</a>

You can also use pseudo-element and opacity:

a {
  text-decoration: none;
  color: blue;
  position:relative;
}
a:after {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:1px;
  background:currentColor;
  opacity:0.2;
}
<a href="/">Some link</a>

Another idea is to use box-shadow like we did with gradient by having two layers:

a {
  text-decoration: none;
  color: blue;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.8),
    0 1px 0 0 currentColor;
}
<a href="/">Some link</a>

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16251

It because you set --color: blue and it not rgb color you have to set rgb color..
the a of rgba is the opacity

a {
  --color: 1,1,1;
  
  text-decoration: none;
  color: var(--color);
  border-bottom: 1px solid rgba(var(--color), 0.2);
}
<a href="/">Some link</a>

You can convert color to rgb here:https://www.rapidtables.com/convert/color/hex-to-rgb.html

Upvotes: 1

Related Questions