What is the best method for eliminating the border of the sibling element just before

I have come up with a nifty little trick to create a border between navigation items

li {
  &:not(.active) {
    &::before {
    border-bottom: grey;
    bottom: 0;
    content: '';
    height: 1px;
    left: 20px;
    position: absolute;
    width: 220px;

    :host-context(.minified) {
      display: none;
    }
  }

The implementation works perfectly. You can see the clearly marked yellow line. If a navigation item is active, I do not apply this border.

In cases where the navigation link is active, I want to remove the border from the previous sibling. This requirement is indicated by the red arrow in the image.

https://i.sstatic.net/87aiS.jpg

Does anyone have any ideas on how to achieve this?

csssass

Answer №1

To set the divider at the top of each li element, you can use the CSS selector li:first-child:after to remove the first divider.

For hover effects, you can target the next li element using the adjacent sibling combinator + and make its background transparent.

Check out this example:

html, body{
  padding: 0px;
  margin: 0px;
}

ul {
  border-right: 2px solid #e5e5e5;
  width: 180px;
  box-shadow: 5px 2px 10px #e5e5e5;
  margin: 0px;
  padding: 0px;
}

li {
  list-style-type: none;
  height: 40px;
  display: flex;
  align-items: center;
  margin: 0px;
  padding-left: 15px;
  position: relative;
}

li:after{
  position: absolute;
  background-color: #e5e5e5;
  top: 1px;
  height: 1px;
  width: 130px;
  left: 20px;
  z-index: 1;
  content: "";
}

li:first-child:after{
  height: 0px;
}


li:hover {
  color: #13A83E;
  background-color: #e5e5e5;
}

li:hover + li:after {
  background-color: transparent;
}
<ul>
  <li>Dashboard</li>
  <li>Assets</li>
  <li>Devices</li>
  <li>More</li>
  <li>Options</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

CSS positioning problems thoroughly elucidated

I'm facing two issues that I can't seem to resolve. My goal is to recreate a design similar to the one found at https://i.sstatic.net/XfPqm.jpg. My first issue is with adjusting the box in the header to stay aligned next to my headline tags. The ...

htmlcssdivision

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

Auto adjusting textarea height as per content length

Is there a way to adjust the height of the text area based on the content entered by the user? I want it to automatically increase as the user types and decrease if they delete content. ...

jqueryhtmlcss

Personalized Navigation Bar Toggle (transitioning from dropdown to sliding from the left)

On larger screens, I would like the navigation/navbar to be positioned at the top. However, on mobile view or when collapsed, I want the toggle button to reveal the navigation menu by sliding from the left side, similar to this example: (source by David B ...

javascriptjqueryhtmlcsstwitter-bootstrap

hide the container while keeping the content visible

Currently, I am working on a map with zoom in and zoom out functionalities. My main concern is how to make the red section invisible while keeping the buttons visible. This will ensure that when users search for locations on the map, their view will not be ...

javascriptcssreactjsmaterial-uistyled-components

Issue with jQuery where it returns "undefined" when trying to access the CSS display property

On my page, there are several divs with default display styles set in an external .css file. When a certain condition is met, I use jQuery to turn one on and the others off using the fadeIn() and fadeOut() methods. However, I've noticed that in Firef ...

jqueryfirefoxcss

What is the best way to conceal a button while maintaining its position in the layout?

My intention is to place two buttons, Reset Form and Save, next to each other using the following code. I want the Save button to be hidden when the user first lands on the page, but reveal itself as the user progresses through the forms. Even when the S ...

javascriptjqueryhtmlcss

Verify the presence of a mouse before attempting to hover

Is there a way to determine if the user has a cursor to hover over elements using JavaScript, while also utilizing Bootstrap? if (hasCursor()) { doCode(); } I initially attempted to check if it was a touch device, but faced limitations testing on my 2- ...

javascripthtmlcssbootstrap-5

What is the best way to create a triangle-shaped div using CSS styling?

Seeking assistance in creating a triangular shape using CSS within a rectangular division. Grateful for any guidance provided. ...

htmlcssstyling

Designing a personalized confirmation pop-up following the submission of an AJAX form

I am currently utilizing the AJAX JQuery validation plugin to submit a form. Below is a snippet of the code: $(document).ready(function(){ $("#myform").validate({ debug: false, rules: { fname: {required: true}, sname: {required: t ...

phpjavascriptjquerycssajax

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

htmlcssimage-resizingautoresizeshrink

The text remains static and does not adjust its size when the screen is

I'm currently utilizing the text-only carousel feature found at this jsFiddle link. Below is the code I am using for resizing: window.addEventListener("resize", resetCarousel); function resetCarousel(){ setCarouselHeight('#carousel-text&apos ...

javascriptcsstwitter-bootstrapresponsive-designcarousel

Center the text within a span element in an inline-block container

I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...

htmlalignmentvertical-alignmentcss

Achieving successful integration of an overlay on a video with the combined powers of Bootstrap and Angular 6

Currently, I am utilizing Angular 6 and Bootstrap in an attempt to display an image along with some text on top of a video element. While most of the functionality is working as expected, I am facing an issue with aligning the overlay properly with the vid ...

htmlcssangularbootstrap-4overlay

When rotating, the SVG ellipses move towards the upper left corner

Why does my animated lp end up in the top left corner instead of centering? I've tried using transform-origin: center; but it's not working. Any help would be greatly appreciated. Thank you in advance. #Component_6_2{ -webkit-transform-orig ...

htmlcssanimationsvgtransform

Is it possible to utilize nanoscroller for scrolling horizontally?

Is it possible to use nanoscroller for horizontal scrolling too? I tried searching on Google but couldn't find any relevant information about this. I have successfully implemented nanoscroller for vertical scrolling, but I'm having trouble gett ...

jqueryhtmlcsshorizontal-scrollingnanoscroller

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am in the process of creating a horizontal family tree. Where I'm At - I am currently working on setting the CSS Line-Height to vertically center each item based on nested content. The Issue - The Line-Height value for nested items keeps growing e ...

jqueryinheritancenestedcss

The size of table cells automatically adjusts when zooming in the browser

While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...

csshtmlgoogle-chromefirefox

Arranging content within columns according to their column position

As I design a grid with three columns, each grid box contains a div with a maximum width of 280px. Sometimes the grid columns exceed this width. To achieve my desired layout, I aim to align the content in the grid boxes so that the left column aligns to th ...

htmlcssflexboxcss-grid

My experience with IE8 has been frustrating as I encounter issues while trying various methods to set min-width using

A variety of scripts are being tested: $(document).ready(function(){$(".body").addClass("ie-min");}); $(document).ready(function(){$(".body").attr("class", "ie-min");}); $(document).ready(function(){$(".body").css("min-width", "350px");}); $(document).rea ...

jqueryinternet-explorercss