Modifying the color of text within an element using CSS and the ::after pseudo

Is there a way to change the text color when a user hovers over it without interfering with the background effect? I currently have a hover effect set to show a background section when hovering over the text, but when I try to change the text color separately, it just covers the text with the background. Here is the code snippet:

.header-links {
  font-size: 18px;
  position: relative;
}

.header-links::after {
  background-color: white;
  content: '';
  border-radius: 0%;
  position: absolute;
  width: 100%;
  height: 100px;
  margin: auto;
  top: -10px;
  left: 0em;
  mix-blend-mode: multiply;
}

.header-links:hover::after {
  background: green;
  cursor: pointer;
}

.header-links:hover {
  color: white;
}
<li class="header-links"> Tutorials </li>
<li class="header-links"> References </li>
<li class="header-links"> Exercises </li>

Any suggestions on how to solve this issue?

htmlcss

Answer №1

To prevent the covering of content, a simple solution is adjusting the z-index of the ::after element to -1:

.header-links {
  font-size: 18px;
  position: relative;
  cursor: pointer;
}

.header-links::after {
  background-color: white;
  content: '';
  border-radius: 0%;
  position: absolute;
  width: 100%;
  height: 100px;
  margin: auto;
  top: -10px;
  left: 0em;
  mix-blend-mode: multiply;
  /* added */
  z-index: -1;
}

.header-links:hover::after {
  background: green;
}

.header-links:hover {
  color: white;
}
<li class="header-links"> Tutorials </li>
<li class="header-links"> References </li>
<li class="header-links"> Exercises </li>

Answer №2

It seems like ::after is adding a pseudo element to the DOM, placing it over the li element. https://example.com/blog/why-you-should-remove-hover-after

If you wanted to achieve the desired effect, consider moving everything inside the hover and removing the hover::after

.header-links:hover {
  cursor: pointer;
  color: white;
  background: green;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background video is not working on iPhones, even though it was functioning properly in the past

After extensive searching, I have been unable to find a solution to my issue. I used an html5 video element as a background with success on both web and mobile platforms, until recently. I have tried adding all necessary attributes for compatibility and I ...

htmlcsshtml5-videomobile-safari

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

jqueryhtmlcssjquery-animatebootstrap-4

Position the div in the center, but for smaller sizes, switch to aligning

My current layout setup is as follows: Left side bar with a width of 200px and positioned at left: 0; Center section with a width of 700px and positioned at left: 250px; Right side bar with a width of 200px and positioned at right: 10px; While this arra ...

css

Simple CSS and HTML trick for creating a seamless hide and hover effect

Every time I've attempted this task in the past, it has been straightforward. However, this time it's proving to be challenging. The goal is simple - have an image display a description when hovered over by a user. HTML: <div class="descript ...

htmlcssshow-hide

I am looking to specifically target and write to a particular line in a text file using PHP

What I am searching for: file.txt: Name: John email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefghij">[email protected]</a> Here is my code snippet: <?php $myFile = "file.txt"; $txt = &apos ...

phphtmlfwrite

What is the method to adjust the opacity of a background in CSS without affecting the entire container?

Although it seems simple, I am trying to design a website background with a container that has semi-transparent properties. When I include opacity: 0.5; within the #content code, the entire container, along with its content and text, becomes transparent. ...

css

Transport parameter via routerLink to a different component

When I click on the link provided in the list-profile HTML document, I need to send a variable. However, the current code is not working and causing crashes. If more details are required, feel free to ask. List Profile Component HTML <div class="col c ...

htmlangularparametersroutescomponents

Having trouble grasping the display property combination in Bootstrap4

Incorporating Bootstrap4 into my web application, I am faced with the task of displaying a menu exclusively on the large screen size setting (lg). The guidelines are straightforward: utilize a class to conceal an element across all screen sizes: .d-none ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Instructions on displaying the main page even with just inputting the default directory in the URL

One scenario is when I input file:///C:/xampp/htdocs/At/html/ in the URL. My desired outcome is for file:///C:/xampp/htdocs/At/html/pages-login.php to be displayed instead. How can I achieve this? ...

phphtml

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools: <nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show"> <ul ...

htmlcsscss-selectors

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

As someone with limited CSS knowledge, I have encountered a challenge. My goal is to ensure that my website's body has a width of 100%, while also preventing the content from wrapping when the browser window is resized. To achieve this, I attempted a ...

htmlcssstyleswidthinline

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

javascriptjqueryhtmlcsstwitter-bootstrap

The JavaScript code for summing two numbers is not functioning as expected

My HTML code takes a user input number, performs a calculation using a formula, and displays the output. The chosen input is inserted into the formula, and the result is added to the original number. However, there seems to be an issue with adding decimal ...

javascripthtmlfunction

Images overlapping within a dynamic container

I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTM ...

htmlcss

What is the best way to halt the ticking of this clock in JavaScript?

I can't seem to figure out how to stop this clock using JavaScript Even though I press the stop button, the clock keeps running <!DOCTYPE html> <html> <head> <h1> Welcome to the clock. Press the stop button to halt the clo ...

javascripthtml

Is the dropping of the middle section in the inline list imminent?

After creating a fiddle to check for conflicts with other styles on my page, I ran into an issue with an inline list. There seems to be a slight drop in the middle item's positioning that I can't figure out. Despite trying various margin adjustme ...

htmlcsshtml-lists

Using Html to differentiate input based on type

Looking for input on the code snippet below: <table class="details-table" *ngIf="animal && animaldata"> <tr *ngFor="let attribute of animaldata.Attributes"> <td class="details-property">{{ attribute.AttributeLabel }}& ...

angularhtmltypescript

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4