如何使用css使Glyphicon在悬停时透明(Bootstrap 3.3.7)

Question

我正在使用伪元素将Glyphicon附加到元素中。看到这个JsFiddle-悬停在标题上，注意图标。我希望图标本身在白色圆圈内变得透明。。。剪切背景，以便看到下面的颜色。我不能只添加某些颜色。。。我需要更灵活的解决方案。我也知道这里提到的background-clip和mix-blend-mode，但据我所知，它们似乎不适用于伪图标。

我尝试过：

h1:hover::after {
background-color: #fff;
color: transparent;
}

它确实使图标透明，但在某种程度上它会完全消失。

标记：

<h1>This is a long headline. An icon is appended automatically</h1>

CSS：

h1 {
color: #fff;
display: inline-block;
padding-right: 30px;
}
h1::after {
color: #fff;
border: 1px solid #fff;
top: -3px;
left: 8px;
border-radius: 50%;
padding: 4px 0;
display: inline-block;
width: 30px;
position: relative;
height: 30px;
text-align: center;
margin-right: -30px;
font-family: 'Glyphicons Halflings';
font-size: 18px;
font-weight: 700;
line-height: 1;
content: "e258";
}
h1:hover::after {
background-color: #fff;
color: transparent;
}

可以只使用css而不使用额外的标记吗？

Answer 1

使用其他类似FontAwesome的东西，您会发现两个图标都已准备好使用

h1 {
color: #fff;
display: inline-block;
padding-right: 30px;
}
h1::after {
color: #fff;
display: inline-block;
font-family: "Font Awesome 5 Free";
font-size: 28px;
font-weight: 700;
content: 'f054';
line-height: 34px;
vertical-align: middle;
margin-left: 10px;
border: 2px solid;
border-radius: 50%;
padding: 0 8px;
}
h1:hover::after {
content: 'f138';
font-size: 34px;
margin-left: 5px;
border: none;
padding: 0;
}
body {
background: red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<h1>This is a long headline. An icon is appended automatically</h1>