链接按钮下划线无法去除及LinkedIn图标点击变红问题求助

问题描述 #

制作了两个按钮样式的链接，分别跳转至联系页面和LinkedIn页面，遇到两个问题：

1. 链接始终带有下划线，即使在CSS中设置text-decoration: none;也无法去除
2. 点击LinkedIn按钮时，图标会变成红色，与按钮风格冲突；同时Chrome的Pesticide扩展查看时显示红色线条，是否与此相关？

原代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.title h1 {
  font-size: 36px;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 860px;
  margin-right: 10px;
  text-align: center;

  /* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);

  /* Make sure text is infront of background images */
  display: block;
  position: relative;
  z-index: 3;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {  
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

.stars,
.twinkling,
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(stars.png) repeat top center;
  z-index: 0;
}

.twinkling {
  background: transparent url(twinkling.png) repeat top center;
  z-index: 1;
  animation: move-twink-back 200s linear infinite;
}

.clouds {
  background: transparent url(clouds.png) repeat top center;
  z-index: 2;
  opacity: 0.4;
  animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
  font-size: 63px;
  font-weight: 500;
  letter-spacing: 5px;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 705px;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  display: block;
  position: absolute;
  z-index: 3;
}

body {
  display: flex;
  min-height: 100vh;
}
.secondarytitle,
h2 span {
  transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
  margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
  margin-right: 10px;
}

.secondarytitle,
h2:hover span:nth-child(2)::after {
  content: "";
  margin-left: 10px;
}
.secondarytitle,
h2:hover span {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 120px #fff;
}
table,
tr,
td,
th{
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "Lato", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: absolute;
  font-size: 24px;
  font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;

}
.button{
  font-size: 27px;
  font-weight: 800px;
  top: 896px;
  left: 1233px;
  width: 248px;
  height: 46px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: absolute;
  transition: 1.7s;
  text-decoration: none;
  overflow: hidden;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button:hover
{
  color: #ffffff;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
  transition-delay: 0.05s;
}



.secondaryButton{
  font-size: 27px;
  font-weight: 800px;
  top: 896px;
  left: 236px;
  width: 197px;
  height: 50px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webki

HTML代码 #

<div class="button">
          <a href="/project2/contact.html">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          contact me
          </div>
          <div class="secondaryButton">
              <a href="https://www.linkedin.com/in/blah-blah/">
                  <span></span>
              <span></span>
              <span></span>
              <span></span>
              linkedIn<ion-icon name="logo-linkedin"></ion-icon>
              </div>

问题1：链接下划线无法去除的解决 #

原因 #

下划线是浏览器给<a>标签的默认样式，你把text-decoration: none;加在了外层的.button/.secondaryButton div上，没有覆盖到内部的<a>元素，所以无效。另外HTML中<a>标签未闭合，可能导致样式解析异常。

解决步骤 #

1. 给按钮内的<a>标签添加无下划线样式：

/* 直接针对按钮内的链接设置无下划线 */
.button a, .secondaryButton a {
  text-decoration: none;
  /* 继承父元素的样式，确保文字效果一致 */
  color: inherit;
  background: inherit;
  -webkit-background-clip: inherit;
  -webkit-text-fill-color: inherit;
  text-shadow: inherit;
}

2. 修复HTML中的标签闭合问题：

<div class="button">
  <a href="/project2/contact.html">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    contact me
  </a> <!-- 补充闭合标签 -->
</div>
<div class="secondaryButton">
  <a href="https://www.linkedin.com/in/blah-blah/">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    linkedIn<ion-icon name="logo-linkedin"></ion-icon>
  </a> <!-- 补充闭合标签 -->
</div>

问题2：LinkedIn图标点击变红的解决 #

原因 #

Ionic图标在链接被点击（active状态）时，会继承浏览器默认的链接激活样式（红色）；而Pesticide扩展的红色线条是工具自带的DOM元素高亮标记，和图标变红无关，仅用于调试。

解决步骤 #

1. 给图标设置固定样式，覆盖默认激活状态：

.secondaryButton ion-icon {
  /* 继承按钮的渐变文字样式，保持风格统一 */
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  /* 禁止图标响应点击事件，避免触发active状态 */
  pointer-events: none;
}

2. 修复.secondaryButton的CSS语法错误（原代码末尾未完成的-webki）：

.secondaryButton{
  font-size: 27px;
  font-weight: 800; /* 修正单位错误：font-weight不需要px */
  top: 896px;
  left: 236px;
  width: 197px;
  height: 50px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webkit-background-clip: text; /* 补全属性 */
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: absolute;
  transition: 1.7s;
  overflow: hidden;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者asaf danan