CODEWITHSUNDEEP
css
Himmators
Himmators

Reputation: 15006

Is it possible to only change the alpha-transparency part of a color?

I have some css like this:

   a
      transition: all 0.4s ease-out
      border-bottom: 1px solid rgba(256, 256, 256, 0)
   a:hover
     border-bottom: 1px solid rgba(256, 256, 256, 1)

This gives me an underline on my buttons that fades in. I would like the underline to always use the same color as the rest of the element, specified using for example

color: rgb(256, 256, 256)

I want this setup so that I don't have to respecify my colors every time I add a border. I can't use opacity, because the element has stuff in it.

Upvotes: 1

Views: 916

Answers (4)

Rounin
Rounin

Reputation: 29463

The other answer I gave employs the ::after pseudo-element and works for inline links on a single line.

This answer, for multi-line links, uses a similar method, but this time, the ::after pseudo-element covers the entire a element (rather than simply being positioned at the bottom of it) and has an alternating repeating background of lines - which ends up looking like one underline for every line in the a element:

body {
width: 400px;
background-color: rgba(0, 0, 0, 1);
}

a {
position: relative;
display: inline-block;
cursor: pointer;
font-size: 16px;
line-height: 20px;
}

a:nth-of-type(1) {
color: rgba(255,0,0,1);
}

a:nth-of-type(2) {
color: rgba(0,255,0,1);
}

a:nth-of-type(3) {
color: rgba(127,191,255,1);
}

a::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 12;
display: block;
width: 400px;
height: 100px;
background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 19px, currentColor 19px, currentColor 20px);
opacity: 0;
transition: all 0.4s ease-out;
}

a:hover::after {
opacity: 1;
}
<a>The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown</a>
<a>fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over </a>
<a>the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. </a>

Upvotes: 0

Rounin
Rounin

Reputation: 29463

You can use opacity, if you apply it to an ::after pseudo-element:

body {
background-color: #000;
}

a {
display: inline-block;
cursor: pointer;
}

a:nth-of-type(1) {
color: rgba(255,0,0,1);
}

a:nth-of-type(2) {
color: rgba(0,255,0,1);
}

a:nth-of-type(3) {
color: rgba(127,191,255,1);
}

a::after {
content: "";
display: block;
height: 1px;
background-color: currentColor;
opacity: 0;
transition: all 0.4s ease-out;
}

a:hover::after {
opacity: 1;
}
<a>The quick brown</a>
<a>fox jumps over</a>
<a>the lazy dog.</a>

Upvotes: 3

Tibor
Tibor

Reputation: 139

You may want to try adding the border by using a pseudo element, then you can separate color and transparency by using opacity, currentColor matches automatically with your link color:

a{
display:inline-block;
}

a::after{
border-bottom:1px solid currentColor;
opacity:0;
content:"";
display:inline-block;
width:100%
}

Upvotes: 2

Tobias Sch&#228;fer
Tobias Sch&#228;fer

Reputation: 1358

The Color rgb(256,256,256) is undefined.

RGB color space is from 0 to 255 So use rgba(255,255,255,0) and rgba(255,255,255,1) and it should work.

body{
  background-color: #000;
}
a{
  transition: all 0.4s ease-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}
a:hover{
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
<html>

    <head>
        <style>
           
        </style>
    </head>
    <body>

        <a href="#">TEST</a>
    </body>
</html>

Upvotes: 0

Related Questions