Tips for aligning a pseudoElement in the center below a bootstrap navigation link

Hello, I'm trying to align the line under my menu that was created using a pseudo element.

Here is the HTML code:

.nav-link.active {
    color: #482683;
    font-size: 14px;
  }
  
  .nav-link.active::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #482683;
    margin-top: 27px;
  }

This is what currently appears:

https://i.sstatic.net/DuPSu.png

I want it to appear centered like this:

https://i.sstatic.net/WoEWM.png

The alignment of the line depends on which element is clicked: "Selection de variable", "Analyse", "Benchmark des models" or "RESULTATS".

I am working with Bootstrap.

htmlcssbootstrap-4css-selectorspseudo-element

Answer №1

Utilize the auto left and right margins for centering the element...

.nav-link.active {
    color: #482683;
    font-size: 14px;

}

.nav-link.active::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #482683;
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<ul class="nav aa" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">DEVELOPMENT OF VARIABLES</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">ANALYSIS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">MODEL BENCHMARKING</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="results-tab" data-toggle="tab" href="#results" role="tab" aria-controls="results" aria-selected="false">RESULTS</a>
    </li>
</ul>

Answer №2

.nav-link{
position:relative;
}
.nav-link.active {
    color: #482683;
    font-size: 14px;

}

.nav-link.active::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #482683;
    margin-top: 27px;
    position: absolute;
    left:50%;
    transform: translate(-50%, -50%);

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<ul class="nav aa" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">SELECTION DE VARIABLE</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">ANALYSE</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">BENCHMARK DES MODELS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="resultats-tab" data-toggle="tab" href="#resultats" role="tab" aria-controls="resultats" aria-selected="false">RESULTATS</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

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

javascriptjqueryhtmlforms

What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names? var className = $('.floor-4').attr('class').split(' ')[1]; var classLength = $('.' + className).length; Here is the HTML code: <div id="d ...

javascriptjqueryhtmlcss

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

javascriptjqueryhtml

Guide to transforming a vertical tabbed content panel into a responsive collapsible using media queries and jQuery

I am in the process of creating a new content navigation design that incorporates vertically stacked tabs to toggle hidden panels adjacent to the tabs. Unfortunately, this layout seems to encounter issues at narrower screen widths. Check out my work on Fi ...

javascriptjquerycssresponsive-designmedia-queries

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

I am currently using jQuery to dynamically create items on an HTML canvas for users to drag around and create drawings in a style similar to Microsoft Visio. However, I am struggling with how to remove these items once they have been created. While I know ...

javascriptjqueryhtml

SSI stands for Server Side Includes, a feature that allows

I have multiple versions of the same HTML page, each with only one hidden variable that is different. This variable is crucial for tracking purposes. Now, I am exploring options to rewrite this by incorporating a HTML file with a hidden variable. Here is ...

javascriptjqueryhtml

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

javascriptjqueryhtmlcss

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

Is there a way to send multiple actions to Node.js via a dropdown list using POST method?

I have encountered an issue where I am trying to include multiple actions in a single form within a dropdown list. However, I am only able to POST one action at a time. admin.html <form action="/start" method="post" id="tableForm"> <select id= ...

htmlnode.jsexpress

Is there a way to automatically reset a datepicker using the on.change function?

I've attempted various methods to clear/reset the value for a datepicker using the on.(change) function, but have been unsuccessful. The Air Datepicker plugin is being used in conjunction with Bootstrap 4. HTML <select title="-- NODE --" id="node ...

jqueryhtmldatepicker

Showing a PDF from a shared folder on a network using AJAX in HTML5

I'm facing a challenge with displaying a PDF on the web. The layout includes a dropdown menu on the left with various PDF file names, and upon selection, the chosen PDF should be displayed on the right using an ajax call. Since my PDFs are stored in a ...

phpajaxhtmlpdf

Issues with the presentation of HTML DIV elements

I am puzzled by a situation where my HTML layout to present financial data does not seem to update properly in certain browsers. Despite using jQuery and inspecting it with Firebug, the visual display of the parent divs remains unaltered. This issue become ...

jqueryhtmlcss

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

Switching Symbols with JQuery

Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and ...

javascriptjqueryhtmlcss

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

I am trying to continuously update the date and time every minute using React hooks. However, I am facing difficulty in updating the time properly. const Link = (props) => { let date = new Date(); const [dateTime, setDateTime] = useState({ cu ...

javascripthtmlreactjsreact-hooks

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

csshtml

Place elements in a grid layout using CSS (and also ensure they are centered)

My goal is to create a data-grid (table layout) where the elements have fixed sizes. These elements should be placed in the same line until they can't fit anymore, then move to the next line. I have tried using inline-blocks for this, but I'm st ...

htmlcss

switching tabs on a webpage

My PHP page has a menu tab with tabs labeled as Dash and Project. The Dash tab contains a table displaying data. The scenario is that when I click on a row in the table within the Dash tab, it should navigate to the Project tab, where a simple form is disp ...

phpjavascriptjqueryhtml

Tips on launching a bootstrap modal by clicking a button in an Angular project

I'm working with a Bootstrap Modal that includes a button to trigger it. Here is the code: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- ...

angularbootstrap-4

The image referenced in the assets folder could not be located within the SCSS

Although I've come across similar questions, none of the solutions provided seem to work for me. I've tried them all, but they just don't seem to do the trick. My goal is quite simple - I just want to set a background image using CSS. Howev ...

cssangular