超链接结合伪代码

Question

在下面的代码中，如何为超链接提供与其他文本相同的字体颜色？它现在似乎用伪代码中定义的颜色变形。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a, a:link, a:visited, a:active {
  text-decoration: none;
  color: #484693;
}

nav {
  color: #484693;
  font-weight: bold;
  width: calc(100% - 5vw);
  display: flex;
  align-items: center;
}

nav>ul {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
}

nav>ul>li {
  margin-right: 2em;
}

nav>ul>li.header-button {
  position: relative;
  padding: 1em;
}

nav>ul>li.header-button::before {
  content: '';
  width: 100%;
  height: 70%;
  background: rgba(255, 25, 255, 0.4);
  border: thin solid rgba(255, 25, 255, 0.4);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

<nav>
  <div class="header-logo">
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a>
  </div>
  <ul>
    <li>Option1</li>
    <li>Option2</li>
    <li class="header-button"><a href="#">Option3</a></li>
    <li class="header-button"><a href="#">Option4</a></li>
  </ul>
</nav>

Answer 1

只需将此添加到您的css中，这样您的元素就会出现在您的文字中。

nav>ul>li.header-button::before {
    z-index: -1; 
}

Answer 2

您遇到的问题是您用于创建背景的伪元素位于锚标记之上，因为您已将absolute position赋予伪元素。您可以通过将position relative分配给锚标记并为其指定z-index来解决此问题。

工作演示：

＆＃13;

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a, a:link, a:visited, a:active {
  text-decoration: none;
  color: #484693;
}

nav {
  color: #484693;
  font-weight: bold;
  width: calc(100% - 5vw);
  display: flex;
  align-items: center;
}

nav>ul {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
}

nav>ul>li {
  margin-right: 2em;
}

nav>ul>li.header-button {
  position: relative;
  padding: 1em;
}

nav>ul>li.header-button::before {
  content: '';
  width: 100%;
  height: 70%;
  background: rgba(255, 25, 255, 0.4);
  border: thin solid rgba(255, 25, 255, 0.4);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

nav>ul>li a {
   position: relative;
   z-index: 1;
}

＆＃13;

<nav>
  <div class="header-logo">
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a>
  </div>
  <ul>
    <li>Option1</li>
    <li>Option2</li>
    <li class="header-button"><a href="#">Option3</a></li>
    <li class="header-button"><a href="#">Option4</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你的:before过度了，其半透明的“背面”地面与实际的链接颜色重叠（因为它位于绝对位置......）。

你不需要那个。您可以通过z-index进行修复，但最好直接在背景上更自然地完成背景。 （你想要点击哪个，对吧？）。并且您可能希望为非链接设置内部跨度，以确保相同的填充和空间：

<nav>
  <div class="header-logo">
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a>
  </div>
  <ul>
    <li><span>Option1</span></li>
    <li><span>Option2</span></li>
    <li class="header-button"><a href="#">Option3</a></li>
    <li class="header-button"><a href="#">Option4</a></li>
  </ul>
</nav>

<强>的CSS：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a, a:link, a:visited, a:active {
  text-decoration: none;
  color: #484693;
}

nav {
  color: #484693;
  font-weight: bold;
  width: calc(100% - 5vw);
  display: flex;
  align-items: center;
}

nav ul {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-around;
}

nav ul li {
  margin-right: 2em;
}

nav ul li a, nav ul li span {
  padding: 10px;
}
nav ul li a {
  background: rgba(255, 25, 255, 0.4);
  border: thin solid rgba(255, 25, 255, 0.4);
  border-radius: 20px;
}

nav ul li.header-button {
  position: relative;
  padding: 1em;
}

查看like this：

接下来，几乎可以肯定，对于display:table <ul> display: table-cell，你li会更好。使用flex肯定是过度的......