链接跨度时其他文本消失

Question

我正在创建一个基本网页，我想要一个由文字组成的标题徽标进行链接。在这之下，我希望有一个口号，保持常规，非链接文本。这似乎不起作用，因为当我在标题（甚至在document.getElementById('button').addEventListener('click', function() { var files = document.getElementById('file').files; if (files.length > 0) { getBase64(files[0]); } }); function getBase64(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { console.log(reader.result); }; reader.onerror = function (error) { console.log('Error: ', error); }; } 内）放置链接时，因为标语文本消失了。我尝试将它们制作成不同的文本块，但这样做会使它们处于不同的界限，破坏了我想要的美学（带有标语的标题文字）

span

:-moz-selection {
  color: #ffffff;
  background: #00ffaa;
}
::selection {
  color: #ffffff;
  background: #00ffaa;
}
a:link {
  text-decoration: none;
  color: #00ffaa;
}
a:visited {
  text-decoration: none;
  color: #00D486;
}
a:hover {
  text-decoration: none;
  color: #ADFFE2;
}
a:active {
  text-decoration: none;
  color: #00ffaa
}
.thing {
  background: #141414;
  position: fixed;
  z-index: 100;
   width: 100%;
}
a.Header {
  color: #aaaaaa;
  float:left;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    margin-right: 15px;
}

.Header:hover {
  color: #dbdbdb;
  transition: all 0.3s ease-in;
}

#bodycontainer {
  position: relative;
  background-color: #191919;
  height: 200%;
  width: 65%;
}

.navigation {
    float: right;
    display: inline-block;
    vertical-align: middle;
}

.navigation li {
    display: inline-block;
    padding: 15px;
}

ul {
    margin-bottom: 0;
}

.navigation li a {
    color: #00ffaa;
}

.navigation li a:hover {
    color: #adffe2;
    transition: all 0.3s ease-in;
}

任何帮助都会很棒，谢谢！