CODEWITHSUNDEEP
css
Gerard
Gerard

Reputation: 15796

Hyperlink combined with pseudo code

In the code below, how can I have the same font color for the hyperlinks as for the other text? It now seems to morph with the color as defined in the pseudo code.

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>

Upvotes: 1

Views: 424

Answers (3)

Frank N
Frank N

Reputation: 10416

Your :before is overdone and its semitransparent „back“ground overlaps the actual link color (since it's positioned absolute...).

You don't need that. You could fix by z-index, but better do that background directly and way more natural on your links. (Which you want to be clickable, right?). And probably you want to have an inner span for your non-links, to ensure same padding and space:

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

Looks like this:

enter image description here

Btw, almost certainly you will be better of with display:table for your <ul>, display: table-cell for your li. Using flex is most certainly overdone...

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

The issue you are having is the pseudo element you are using to create the background is coming on top of the anchor tag, since you have given absolute position to the pseudo element. You can overcome that by assigning position relative to the anchor tag and assign a z-index to it.

WORKING DEMO:

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

Upvotes: 1

Yordan Ramchev
Yordan Ramchev

Reputation: 340

Just add this to your css, so your element would be under your text.

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

Upvotes: 1

Related Questions