Display of CSS triangle placed at the lowermost part of the webpage

When hovering over each item, I want a triangle to appear underneath it. Currently, the triangle is displaying correctly, but there's also an extra triangle showing up at the bottom. I'm not sure why this is happening and I can't figure out how to fix it. Any help or insight would be greatly appreciated. Here's the code I'm using:

.wrapper_icons {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}
.wrapper_icons li {
  border-bottom: 4px solid black;
  flex: 3;
  margin-right: 20px;
}
li:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: solid transparent;
  margin-left: -11px;
  border-width: 11px;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.wrapper_icons li:hover {
  cursor: pointer;
  cursor: hand;
}
.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
}
.sink:hover {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}
<ul class="wrapper_icons">
  <li class="sink">Lorem ipsum</li>
  <li class="sink">Lorem ipsum</li>
  <li class="sink">Lorem ipsum</li>
</ul>

htmlcss

Answer №1

The position of the after pseudo-elements is defined as absolute, allowing it to inherit the position from its closest ancestor with a position: relative property. To achieve this, ensure to include position: relative in the list item:

.wrapper_icons li 
{
    position: relative;
    border-bottom:4px solid black;
    flex:3;
    margin-right:20px;
}

Answer №2

To achieve a cool effect, you can use a transparent triangle created with a pseudo-element and change its color on hover of the li element using li:hover:after

.container_icons {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
}
.container_icons li {
  border-bottom: 4px solid black;
  flex: 3;
  margin-right: 20px;
}
li:after {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: transparent;
  transition: all 0.3s ease-in;
}
.container_icons li:hover {
  cursor: pointer;
}
.changeColor {
  transition: all 0.3s ease-in;
}
.changeColor:hover {
  transform: translateY(5px);
}
.changeColor:hover:after {
  border-top-color: rgba(0, 0, 0, 0.2);
}
<ul class="container_icons">
  <li class="changeColor">Lorem ipsum</li>
  <li class="changeColor">Lorem ipsum</li>
  <li class="changeColor">Lorem ipsum</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

HTML 5 File selection on iOS and Android using Cordova/Phonegap

I attempted to utilize the camera in a PhoneGap app using the HTML5 input tag as shown below. Create a new project through CLI Add iOS and Android platforms Incorporate the camera plugin Build for both devices Run on iPhone 5 with iOS 7.1.2 and Samsung N ...

androidioshtmlcordova

How can I make columns with a max-width expand fluidly?

I am currently using a fluid/responsive column layout that looks like this: .row{ float:left; max-width:960px; width:100%; } .column{ float:left; margin:0 15px; } .column:first-child{ margin-left:0; } .column:last-child{ mar ...

htmlcssgridfluid-layout

`Changing the iframe content dynamically with next and previous buttons: a step-by-step guide`

function displayPDF(fileSlNo){ var data = { pageMode: "PDF_DISPLAY", fileSlno: fileSlNo }; var d = $.param(data); var request = $ .ajax({ type: "GET", url:"folderNavigation.do?"+d, dataType : "TEXT", success: functio ...

jqueryhtmlajax

Stop the WebGL Three.js container from capturing scroll events

I am working on a full-screen three.js application which serves as the background and I am trying to add overlaid text that can be scrolled. However, my issue arises from the fact that the three.js WebGL container intercepts all scroll events and prevents ...

javascriptcssdomthree.js

The process of rendering a form eliminates the classes that were previously added by J

I am in the process of redesigning a web application and need to incorporate responsive design into the existing UI. My plan is to include col-* classes on specific html elements, such as tables: function addColstoTableCells() { $('table tr.form ...

jqueryhtmljsfresponsive-design

How can JQuery determine the current CSS background image of a three-state icon or button?

I am facing a challenge with using three images to represent different states of an application icon, and I am trying to achieve this using CSS. There are no issues with the original or hover states: #myDIV { background-image: url(icons/homeBlack.png); } ...

jquerycssbackground-image

Guide to Display Three.js Code Suggestions in an HTML Document

I've exhausted all possible options to enable Three.js intellisense, but it simply refuses to appear. I've tried every known method in the manual. What's the missing piece here? Please share your insights. <!DOCTYPE html> <h ...

htmlthree.jsintellisense

What is the code to create a forward slash on a webpage using HTML/CSS?

I want to create a unique parallelogram/slash design on my website. While it's simple to place two rectangles side by side, achieving the slash effect is proving to be quite challenging. Can this be done using only CSS or HTML, or does it require SVGs ...

htmlcss

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

Using @font-face to apply a font on an SVG file is not supported

I attempted to incorporate custom fonts into my SVG file, but unfortunately, my efforts were unsuccessful. While I have successfully implemented custom fonts on regular HTML/CSS webpages before, I encountered difficulties when trying to do the same with SV ...

htmlcsssvgfontsembed

Switch between various div elements

Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is ...

javascripthtmljquerycsstoggle

"Step-by-step guide to building a webgrid or table to organize and display your

These are the HTML codes I have created: <table> <tr> <td><label style="text-align:left">Product Code:</label></td> <td><input type="text" id="productCode" value="" /> </td> </tr> & ...

javascripthtml

The final element that fractures all its sibling elements positioned absolutely

I am experiencing an issue with a container div that contains 5 absolutely positioned images. When I specify the last image as absolutely positioned, all other images lose their positioning and stack at the top. The container itself is relatively position ...

htmlcss

Retrieving information from mongoDB and showcasing it on an HTML page

I need some help with fetching data from my MongoDB database and displaying it on an HTML page. I have already set up the server.js file for the data retrieval. Here is the content of my server.js file: const path = require('path'); const expre ...

htmlnode.jsmongodbexpress

Tips for utilizing jQuery to display images similar to videos

Are there any plugins available that can create a video-like effect on images by incorporating scroll, pan, tilt, zoom (in/out) transitions for a few seconds before fading to the next image? I've searched but haven't found anything quite like thi ...

javascriptjqueryimagehtml

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...

phpjavascriptjqueryhtmlajax

Conceal elements when they are too small without the use of JavaScript

I want to be able to hide content when the window size is below a certain point. After finding an example at (http://css-tricks.com/dynamic-page-replacing-content/), I still couldn't figure out why it actually works. <div class="container"> ...

cssdynamicsize

Markdown Custom Parsing

Every week, I create a digest email for my university in a specific format. Currently, I have to manually construct these emails using a cumbersome HTML template. I am considering utilizing Markdown to automate this process by parsing a file that contains ...

pythonhtmlrubymarkdownhtml-email

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

javascripthtmlcss

Adjusting the width of tabs dynamically using jQuery

It's important to note that this question doesn't mirror the one found here. I am utilizing the jQuery UI Tab feature on my page and aiming for the tabs to occupy the entire width of the page. However, the number of tabs can vary between 0, 1, 2, ...

jqueryhtmljquery-uijquery-ui-tabs