Expand the entire angled li tag when hovering over it

I have created a navigation bar (ul) with diagonal left and right borders.

I am facing difficulty in ensuring that the :hover effect fills the entire li.

Is there a way to achieve this or should I consider changing my approach?

section ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  list-style-type: none;
  margin: .5em 1em;
}
li {
  margin: 0;
  border-radius: 1px;
  position: relative;
  padding: 0.3em 0.8em;
  cursor: pointer;
}
li:nth-child(2n+1)::before {
  content: "";
  border-right: 2px solid black;
  transform: rotate(20deg);
  display: block;
  position: absolute;
  top: -2px;
  left: -5px;
  width: 2px;
  height: 120%;
}
li:nth-child(2n)::after {
  content: "";
  border-right: 2px solid black;
  transform: rotate(-20deg);
  display: block;
  position: absolute;
  top: -2px;
  left: -5px;
  width: 2px;
  height: 120%;
}
li:hover {
  background-color: black;
  color: white;
}
<section>
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
    <li><a>Link 4</a></li>
  </ul>
</section>

htmlcss

Answer №1

Here's a unique approach for you to consider - using pseudo elements and skew:

section ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  margin: .5em 1em;
}

li {
  position: relative;
  padding: 0.3em 0.8em;
  cursor: pointer;
  z-index: 0;
}

li:before,
li:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 70%;
}

li:before {
  left: -1px;
  border-left: 2px solid #000;
}
li:after {
  right: -1px;
  border-right: 2px solid #000;
}

li:after,
li:nth-child(odd):before {
  transform: skewX(-15deg)
}
li:before,
li:nth-child(odd):after {
  transform: skewX(15deg)
}

li:hover {
  color: #fff;
}

li:hover:before,
li:hover:after {
  background: #000;
}
<section>
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
    <li><a>Link 4</a></li>
  </ul>
</section>

Answer №2

If you want to enhance the appearance of your pseudo-elements when hovered over, consider updating the styles like this:

When hovering over a list item, the pseudo-elements can be styled dynamically for added visual effects.

Answer №3

Alternatively, you can experiment with different coding techniques.

Outlined below is an example of CSS styling:

section ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  list-style-type: none;
  margin: .5em 1em;
}
li {
  margin: 0;
  border-radius: 1px;
  position: relative;
  padding: 0.3em 0.8em;
  cursor: pointer;
  z-index:30;
}
li:nth-child(2n+1)::before {
  content: "";
  border-left: 2px solid red;
  display: block;
  position: absolute;
  top: -2px;
  left: -3px;
  width: 100%;
  height: 120%;
  transform:skew(-20deg);
  z-index:-1;
}
li:nth-child(2n+1)::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -10px;
  border-bottom: 41px solid rgba(255, 0, 0, 0.6);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 120%;
  opacity:0;
  z-index:-2;
  transition: all 0.5s ease-in-out;
}
li:nth-child(2n)::before {
  content: "";
  border-right: 2px solid black;
  transform: rotate(-20deg);
  display: block;
  position: absolute;
  top: -2px;
  left: -5px;
  width: 2px;
  height: 120%;
}
li:nth-child(2n)::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -12px;
  border-top: 40px solid rgba(0, 0, 0, 0.6);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
  width: 125%;
  opacity:0;
  z-index:-2;
  transition: all 0.5s ease-in-out;
}
li:hover{
  color: white!important;
}
li:hover::after {
  opacity:1;
}

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

Simple steps to emphasize a table cell in Angular 2

Essentially, I have a table structured as shown below <table> <tr> <td>Date</td> <td>Time</td> <tr> <table> The goal is to make both the date and time clickable within this table. When clicking on the date, ...

htmlcssangulartypescript

Enhabling single-click selection for cell edit in Primeng table, rather than having to double-click

My current setup involves using a p-table where cells are filled with integer data and can be edited. When I click once on a cell, the input text becomes visible with the cursor positioned at the end of the existing text. The objective is to have the entir ...

cssangulartypescriptprimengprimeng-turbotable

I am having an issue with a mobile JQuery collapsible div that is not properly displaying the internal div within the item

Mobile JQuery jquery.mobile-1.0rc2.min.js HTML 5 Asp.net 4.0 I am having trouble with a gridview item-template where I have implemented the collapsible div from JQuery Mobile. The label text within the h3 element can be quite long, and I want to clip it i ...

gridviewhtmljquery-mobileitemtemplate

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

What is the best method to display each HTML output on a separate line using Python?

As a beginner, I am working on a small project involving webscraping. My goal is to print the lyrics of a song with each line on a separate line using Beautiful Soup in Python. However, the output I'm getting looks like this: I looked out this mornin ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

How can I update two divs simultaneously with just one ajax call?

Is there a way to update 2 divs using only one ajax request? The code for updating through ajax is in ajax-update.php. <?php include("config.inc.php"); include("user.inc.php"); $id = $_GET['id']; $item = New item($id); $result = $item->it ...

javascriptphpjqueryhtmlajax

Utilize the precise Kendo chart library files rather than relying on the kendo.all.min.js file

My application currently uses the Kendo chart, and for this purpose, it utilizes the "kendo.all.min.js" file which is quite large at 2.5 MB. To optimize the speed performance of the application, I decided to only include specific Kendo chart libraries. In ...

javascripthtmlangularjskendo-ui

Implementing interactive data changes using Vue's click event handling feature

<td> //click button required here <v-btn icon v-for="bank in order.banks" :key="bank.bankIndex">{{bank.tittle}}</v-btn> </td> <td> //display only clicked bank's price here <div v-for="ban ...

javascripthtmlvue.jsvuetify.js

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

phphtmlcss

Is there a way to implement a scrollbar within a DIV element?

I'm working on a webpage that includes several customized buttons within multiple DIVs. Take a look at this example on the fiddle. Since I have a lot of buttons, I need to find a way to add a scrollbar so users can easily navigate to the desired butt ...

css

How to Convert Pixel Units to Rem and Em in CSS?

Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...

cssresponsive-design

How to Use CSS to Perfectly Align Form Elements in the Center of

No matter what I try, I just can't seem to get these form elements centered on the page using CSS. Here is my code snippet: http://jsfiddle.net/VJLst/1/ <style> #divQuizFillBlank { margin-left: auto; margin-right: auto; } #textQuizFill ...

htmlcss

Sometimes, the browser may fail to recognize a jQuery click event when a CSS3 transform is applied

There is an issue where click events are sometimes not triggered when an element contains another element being animated with CSS transitions. To see an example of this problem, check out the test case at http://codepen.io/anon/pen/gbosy In my layout, I ...

jquerycsscss-transitionsjquery-on

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down. Below is a snippet illustrating how I struct ...

javascriptcssreactjstypescriptmaterial-ui

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Is there a way to automatically increase the width of a textarea?

Is there a way to automatically adjust the width of a textarea? I know how to make it grow in height, but I haven't come across a method to only increase the width. To provide a visual example, I'm looking for something similar to how iMessage e ...

cssreactjs

I am looking to convert the HTML code into Selenium code

Changing HTML Content <form id="commentUpdateForm" method="post" data-commentid=""> <fieldset> <input type="hidden" name="points" value=""> <di ...

pythonhtmlselenium

Can a single div have three different border-bottom styles?

Can three border-bottom styles be applied to a single div element? This is the desired appearance: ...

css

Guide on switching to HTML inside an iframe with the help of Selenium

I am attempting to interact with the extension popup, which contains HTML within an iframe, and another iframe that also contains HTML inside the first iframe. Is it possible to achieve this using XPath? <iframe id="1"> <html> ...

javahtmlseleniumiframe