Question

我有一些像这样的CSS：

   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)

这给了我一个淡入淡出的按钮的下划线。我希望下划线总是使用与元素的其余部分相同的颜色，例如使用

指定

color: rgb(256, 256, 256)

我想要这个设置，这样每次添加边框时都不必重新指定颜色。我不能使用opacity，因为元素中有东西。

Answer 1

如果将opacity应用于::after伪元素，则可以使用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; }：

＆＃13;

<a>The quick brown</a>
<a>fox jumps over</a>
<a>the lazy dog.</a>

＆＃13;

%Adapt colour values so that they are between 0 and 1
ixcolours=(Ix(:,1)+abs(min(Ix(:,1))))/max(Ix(:,1)+abs(min(Ix(:,1))));
iycolours=(Iy(:,1)+abs(min(Iy(:,1))))/max(Iy(:,1)+abs(min(Iy(:,1))));

for i=1:471;
    if seed_locs(i,3)==20; %If we are in the 20th seed z slice
        plot(seed_locs(i,1),seed_locs(i,2),'MarkerFaceColor',[ixcolours(i) 0 1-ixcolours(i)],'MarkerEdgeColor',[ixcolours(i) 0 1-ixcolours(i)],'MarkerSize',10,'Marker','s') %plot the x and y seedlocs
        hold on
    elseif test_locs(i,3)==20; %if we are in the 20th test z slice
        plot(test_locs(i,1),test_locs(i,2),'MarkerFaceColor',[iycolours(i) 0 1-iycolours(i)],'MarkerEdgeColor',[iycolours(i) 0 1-iycolours(i)],'MarkerSize',10,'Marker','s') %plot the x and y seedlocs
    end
end

＆＃13;

Answer 2

您可能想尝试使用伪元素添加边框，然后可以使用不透明度分隔颜色和透明度，currentColor会自动匹配您的链接颜色：

a{
display:inline-block;
}

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

Answer 3

颜色rgb(256,256,256)未定义。

RGB颜色空间为0到255 因此，请使用rgba(255,255,255,0)和rgba(255,255,255,1)，它应该有效。

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>

Answer 4

我给出的另一个答案使用了::after 伪元素，并且可以在一行上使用内联链接。

对于多行链接，此答案使用了类似的方法，但这一次，::after 伪元素涵盖整个{{1元素（而不是简单地位于它的底部）并且具有交替的重复背景线 - 最终看起来像a元素中每一行的下划线：

＆＃13;

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;
}

＆＃13;

是否可以仅更改颜色的Alpha透明度部分？

4 个答案: