The offspring selector and the after pseudo-element

So, I have this CSS snippet here:

.nav-item > .nav-link:not(.active)::after {
  content: "test";
  display: block;
  width: 0;
  border-bottom: solid 2px #019fb6;
  transition: width .3s;
}

But now, I want to try something different:

.nav-item::after > .nav-link:not(.active) {
  content: "test";
  display: block;
  width: 0;
  border-bottom: solid 2px #019fb6;
  transition: width .3s;
}

And lastly:

.nav-item:hover::after > .nav-link:not(.active) {
  width: 100%;
}

I am attempting to create a hover effect that only applies to nav-items without the "active" class. But for some reason, it's not working as expected. Can anyone point out what mistake I might be making?

Here is the HTML:

<li class="nav-item"><a class="nav-link text-left" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link text-left active" href="#">FirstItem</a></li>

Thank you in advance.

htmlcssbootstrap-4css-selectors

Answer №1

The primary issue here is that CSS currently does not support moving elements upwards. It appears that you are attempting to detect an active class within a nested <a> element and apply styling to the parent element's pseudo content. Instead, consider moving the active class to the parent level (li). This way, you will have better control over the pseudo content. You'll notice in the code snippet below that I included overflow: hidden in the un-hovered state to ensure the content remains hidden until needed. Additionally, I applied a transition effect on the opacity property to create a smoother visual effect.

.nav-item:not(.active)::after {
  content: "test";
  display: block;
  width: 0;
  opacity: 0;
  border-bottom: solid 2px #019fb6;
  transition: width 0.3s, opacity 0.3s;
  overflow: hidden;
}

.nav-item:not(.active):hover::after {
  width: 100%;
  opacity: 1;
}
<ul>
  <li class="nav-item active"> <!-- active moved here -->
    <a class="nav-link text-left" href="#">FirstItem</a></li>
  <li class="nav-item">
    <a class="nav-link text-left" href="#">Second Item (active)</a></li>
</ul>

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

What is the best way to present a Python list in individual lines on an HTML webpage?

This might be a simple question, and I apologize if I haven't explained it clearly. This is my first time working with HTML, and I'm using a given program that I don't fully comprehend. In the python program, app.py, I read a list of string ...

pythonhtmlflask

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

javascriptcsshtmlreactjsreact-datepicker

The functionality of getElementsByClassName and appendChild is not producing the desired outcome

First of all, the solutions must strictly adhere to VanillaJS. I am presenting a straightforward HTML code snippet below: <div class="x">X</div> <div class="x">Y</div> <div class="x">Z</div> Accompanied by a block of ...

javascripthtml

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

Angular binding for selecting all data

Upon checking a checkbox for a single item, the bound data is retrieved and added to an array. However, this does not happen when using selectAll. Code snippet in Angular for obtaining the object of a checked item: $scope.selectedOrganisations = []; $sco ...

javascripthtmlangularjs

Can a linked checkbox be created?

Is it possible to create a switch type button that automatically redirects to a webpage when turned on by clicking a checkbox? I'm working on implementing this feature and would like to know if it's feasible. ...

javascripthtmlcss

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

javascriptcssextjsextjs4

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

javascriptcssmarquee

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

csssvg

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

Steps to update the bootstrap version in an existing project

My current project was built using Bootstrap 3.3.6 classes, but now I want to take advantage of the features offered by Bootstrap 5.2. However, simply changing the version of Bootstrap isn't as easy as it sounds. What is the most effective way to upgr ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-5upgrade

Tips on toggling the visibility of div elements with JavaScript

In my selection block, I have three categories of elements and associated Divs. The goal is to display the related divs when a category is selected, while keeping them hidden otherwise. Specifically, I want the husband_name and number_pregnancy divs to be ...

javascriptphphtmlcodeigniter

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions: The .has-error class has been renamed to .has-danger. However, I have found that this change does not seem to take effect. The border and text are not colored as expected. For instance: <div class="form-grou ...

twitter-bootstrapcssbootstrap-4

Determining the length of an array of objects nested within another object

I received a response from the API called res. The response is in the following format: {"plan":[{"name":"ABC"},{"name":"DEF"}]}. I am attempting to save this response in my TypeScript code as shown below: ...

htmlangulartypescriptapiangular8

The search filter implemented in the ng-if directive in AngularJS seems to be malfunctioning

I've been using the angularjs search filter and it was working well. However, I wanted the search box to only appear in the Cars list. So, I added ng-if="key=='Cars'" to the search box. But strangely, after adding the ng-if, the filter stopp ...

javascripthtmlangularjs

Animating text so it moves to a random spot within a circular div

I hope everyone is doing well. For my assignment, I need to animate an image to a circular div container at a random location. Currently, I have already completed this task. You can view my work here: jsfiddle.net/f4p6b/137 However, the issue I am faci ...

javascriptjqueryhtmlcss

Transferring data from a text area to a table with AngularJS

Creating a C# MVC App with AngularJS My goal is to populate a table with values entered in a text area using Angular. Here is the process: Users input values into a text area like this: A B C When a user clicks a button, a modal window should open and ...

javascripthtmlangularjs

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for aligning all elements in-line using Bootstrap CSS

I am trying to make all elements display in a line in my HTML tags. How can I achieve this using Bootstrap? Currently, the page size is displaying on different lines. Thank you, Austin TX <div class="col-xs-12 col-md-8 form-inline"> <span c ...

csstwitter-bootstrap