I am working on a horizontal navigation bar that consists of a UL list with LI elements for each menu item. The CSS properties display:flex and justify-content:space-evenly are being utilized.
The challenge I am facing is setting the width of the UL element to be equal to its container without knowing the number of items in advance.
Is there a way, using only pure CSS and without modifying the HTML, to position bullets precisely in the middle of the space between items?
To create a similar effect, you can utilize the after pseudo elements of the li items for bullets and employ display: contents; to treat them as direct children of the ul-container, positioning them precisely in the middle of the actual items. However, please note that this method only functions properly if there is just one primary child within each individual li element (as demonstrated by the a element in the example below)
ul {
display: flex;
padding: 0;
margin: 0;
justify-content:space-evenly;
align-items: center;
}
li {
display: contents;
list-style-type: none;
position: relative;
}
li:not(:last-child):after {
content: "";
width: 5px;
height: 5px;
border-radius: 5px;
background-color: currentcolor;
display: block;
}<ul>
<li><a href="#">Point 1</a></li>
<li><a href="#">Point 2</a></li>
<li><a href="#">Point 3</a></li>
<li><a href="#">Point 4</a></li>
</ul>Currently utilizing Bootstrap v5.2, I am endeavoring to replicate the image displayed in the link below: Blurry Sidebar Backdrop As per the MDN Documentation, backdrop-filter is intended for blurring the background of an element. .offcanvas-backdrop { ...
I am currently developing a compact web application using Flask, and I have encountered a challenging issue with navigating back to the previous page. Here are some approaches I have experimented with: Avoiding navigation away from the page - content ...
I'm currently working with 3 bootstrap dropdown elements. The toggle for the first two is not controlled by jQuery, but for the third one, I am using jQuery to show and hide it. However, I've encountered some issues that need fixing. When clickin ...
As a beginner, I am facing difficulties with validating an object that has the same value as a list inside an Array. The issue may seem simple, but I am struggling to manipulate the objects effectively. I have an Array named ApprovedLevels which contains U ...
Context: The form I have contains various input fields. Upon pressing the [verify] button, only the "first name" is displayed. My goal is to display all input fields, whether empty or filled, in a table format similar to that of the form. Exploration: ...
Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...
As I delve into my JavaScript project, utilizing the fetch() method, I find myself facing a puzzling situation. Despite having a grasp on the basics of fetch and formData, the code in question appears needlessly complex for its intended purpose, leaving me ...
I've successfully adjusted my html form to display some fields side-by-side within a form-group in order to reduce the overall height of the form. However, I am struggling to eliminate the excessive white space to the right of the fields. Can someone ...
Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...
Work has been a challenge for me lately as I try to achieve a specific task. The starting page features a textbox and a button. My goal is to post the value entered in the textbox to an iframe on a different web page called iframeholder. The catch is tha ...
I'm attempting to include padding on the right side of a horizontal scroll so that the last item in the scroll appears in the center of the screen. Here's what I have tried so far. While the left padding works perfectly, I'm puzzled as to w ...
I'm trying to customize the default MUI CSS for the accordion component using a CSS module. The issue I'm facing is that the class is dynamically added by MUI, making it impossible to target directly. Here's the solution I attempted, but it ...
Despite adding zoom functionality to my line chart, I am facing an issue where it automatically zooms in to the first point and does not allow me to zoom back out, except for using the reset zoom function. The zoom out function is also not working properly ...
------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...
I need the selenium IDE test case to automatically select a date following the steps outlined below: Start by clicking on the departure date to open the datepicker Loop through the dates starting with the currently selected day until the next available d ...
I need help with custom CSS for my WordPress site. I want to apply a hover effect to all menu buttons except for the "Contact" button, which already has its own styling. The CSS code adds a growing line beneath the hovered menu item and a static line unde ...
While working on an SVG filter with CSS animation, I utilized the following code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result= ...
I am currently using vb.net in my asp.net project along with Bootstrap 4. Within a modal, I have two dropdown lists. The goal is for the second list to be sorted based on the user's selection from the first list. However, I encountered an issue where ...
Currently seeking a reliable method to serve videos through Google Cloud Storage that is compatible with all browsers, including Apple devices. I am facing challenges trying to play videos on my website (Vue front end, node.js backend) that are stored in ...
I'm completely new to this industry, so I could really use some assistance. Despite trying every possible solution, nothing seems to be working for me. Currently, I am looking to add some text to my scroll-to-top button, which already exists with an ...