What is the best way to place a vertical line above the text when it is in use?

How can I add a vertical line above the active element using CSS? I was recommended to use either :before or :after, but I'm not sure how to implement them. I tried using :after without success. Any advice on achieving this effect? See the design example below.

https://i.sstatic.net/gRgKQ.jpg

.nav-menu{
    background: var(--unnamed-color-ffffff);
    flex: 1;
    justify-content: space-between;
    padding-top: 2.3rem;
    width: 91.5rem;
}

.nav-menu .icon{
    width: 2.0rem;
    height: 2.0rem;
    margin-right: 1.5rem;
}

.nav-menu .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .nav-list .nav-item{
    display: inline-block;
}

.nav-menu .nav-list .nav-item .nav-link {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.nav-menu .nav-list .nav-item .active {
    color: red;
}

.nav-menu .nav-list .nav-item .active ::after {
    content: '';
    border-left: 0.1rem solid red;
    height: 1.5rem;
    position: absolute;
    left: 50%;
    top: 0;
}
        <nav class="nav-menu d-flex" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#home" class="nav-link  active">one</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">two</a>
                </li>
                <li class="nav-item">
                    <a href="#service" class="nav-link">three</a>
                </li>
                <li class="nav-item">
                    <a href="#promotion" class="nav-link">four</a>
                </li>
                <li class="nav-item">
                    <a href="#customer" class="nav-link">five</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">six</a>
                </li>
            </ul>

        </nav>

htmlcss

Answer №1

It appears that you are utilizing Bootstrap? If that's the case, most of the CSS may not function correctly. The sample below includes Bootstrap 5 loaded, and your custom CSS was too intricate to incorporate (Bootstrap styles would override most of it anyway). Therefore, the following CSS rules were implemented:

    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }

This styling will be visible whenever a link is given the class .active. If the symbol | is too large, adjust the font-size directly in the .active::before selector -- use Dev Tools to determine the computed font-size of .active::before for guidance on how much to reduce it by. Additionally, I made some modifications to certain Bootstrap classes based on the recommended Bootstrap usage.

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa5baa7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .active {
      position: relative
    }
    
    .active::before {
      content: '|';
      position: absolute;
      left: calc(50% - 0.25ch);
      top: -1ch;
      color: tomato;
    }
  </style>
</head>

<body>
  <main class="container">
    <section class="row">
      <nav class="col">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a href="#home" class="nav-link active">one</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">two</a>
          </li>
          <li class="nav-item">
            <a href="#service" class="nav-link">three</a>
          </li>
          <li class="nav-item">
            <a href="#promotion" class="nav-link">four</a>
          </li>
          <li class="nav-item">
            <a href="#customer" class="nav-link">five</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">six</a>
          </li>
        </ul>
      </nav>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f504f52">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

Answer №2

Here is a snippet that might be helpful.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: lightgoldenrodyellow;
  display: grid;
  place-content: center;
}

.box{
  width: 10rem;
  height: 5rem;
  border: 1px solid black;
}

.box::before{
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  height: 1.5rem;
  width: 2px;
  background-color: sandybrown;
}
<body>
    <div class="box"></div>
  </body>

Answer №3

To create a custom design for your navigation menu, you can utilize the pseudo-element active:before along with setting position:relative on the parent element where position:absolute is used. Below is an example implementation:

.nav-menu{
    background: var(--unnamed-color-ffffff);
    flex: 1;
    justify-content: space-between;
    padding-top: 2.3rem;
    width: 91.5rem;
}

.nav-menu .icon{
    width: 2.0rem;
    height: 2.0rem;
    margin-right: 1.5rem;
}

.nav-menu .nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu .nav-list .nav-item{
    display: inline-block;
}

.nav-menu .nav-list .nav-item .nav-link {
    display: inline-block;
    text-decoration: none;
    color: black;
}

.nav-menu .nav-list .nav-item .active {
    color: red;
    position: relative;
}

.nav-menu .nav-list .nav-item .active::before {
    content: '';
    border-left: 0.1rem solid red;
    height: 1.5rem;
    position: absolute;
    left: 50%;
    bottom: 100%;
}
<nav class="nav-menu d-flex" id="nav-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="#home" class="nav-link  active">one</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">two</a>
                </li>
                <li class="nav-item">
                    <a href="#service" class="nav-link">three</a>
                </li>
                <li class="nav-item">
                    <a href="#promotion" class="nav-link">four</a>
                </li>
                <li class="nav-item">
                    <a href="#customer" class="nav-link">five</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">six</a>
                </li>
            </ul>

        </nav>

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

What is the best way to change the background color of a table cell in HTML and CSS?

Trying to adjust the background image of each data cell to a selected image has been challenging. Using the method displayed below, only the top left corner of the photo appears. The code snippet demonstrates setting the background of each data cell to th ...

htmlcssimagebackgroundstyling

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

csshtmloverflow

Is it possible to dynamically change a form's input value using a JavaScript keyup function based on input from other form elements?

My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...

javascriptjqueryhtmlformskeyup

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

javascriptjqueryhtmlforms

execute php function when form is submitted

Hello, I am attempting to create a code using this PHP function: <?php function generateRandomString($length = 6) { return substr(str_shuffle(str_repeat($x='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', ceil($length/str ...

phphtmlrandomonclickcall

The icon must be aligned to the right and able to adapt to different

I'm attempting to align a Font Awesome icon to the right while keeping an input field aligned to the left on the same line. Both elements should be responsive and maintain their positions. I've created a sandbox and an image showcasing how it cu ...

cssbootstrap-4iconsalignment

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

Ways to execute a JavaScript function upon a button click instead of during the page load completion

I searched on Google but couldn't find the answer, so I'm asking here for help. In the attached screenshot located at the end, when the user clicks on the download button, some backend actions are performed such as file transfer. Once the proces ...

javascriptc#jqueryhtml

The request response was a JSON object that started with the keyword "POST"

My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...

phpjqueryhtmljsonajax

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

I have successfully created a table using embedded JavaScript with the help of messerbill. Here is the code: <table id="Table1"> <tr> <th>Kickoff</th> <th>Status</th> <th>Country</th> < ...

javascripthtmlnode.jsejs

Eliminating the final space in CSS flexbox layout

When I set the display of an element to flex, I noticed that the last space in a text string gets removed. <div class="has_flex"> Some text <a href="link">Link</a></div> After setting display to flex: <div class="has_flex"> ...

htmlcssflexbox

Generate HTML tags dynamically within a JSON document using PHP

Is there a way to incorporate HTML markups (generated dynamically by a CMS) into a JSON file? I am aware that in the html string, one must escape double quotes by adding "" as shown below. { "title": "Title", "da ...

javascriptphphtmljson

Update input box value using Javascript

Here is the code for a <script> tag on a webpage that includes an input box within the body of an HTML document- <script type="text/javascript" language="JavaScript"> window.onload = function addSearchText() { document.getElementB ...

javascripthtmlajax

What is the best way to align an element at the bottom in order to allow it to grow vertically

I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...

htmlcsspositionalignment

Ways to send a POST variable to PHP without refreshing the webpage

Is there a way to pass a simple variable from a text-box on a different page to PHP without reloading it? I've been informed that Ajax is required for this task, but I'm unsure of how to go about implementing it. Can someone provide me with a sam ...

phpjavascripthtmlajax

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

Is there a way to restore a minimized min.css file?

Recently, I attempted to utilize an online tool for unminifying my CSS code. However, when I replaced the minified code with the unminified version and accessed the URL, I discovered that the entire website had lost its layout. Unfortunately, relying sole ...

htmlcssminimizeunminify

Unable to execute a basic opacity transition on a div element

Why isn't the opacity transitioning in Chrome? I only want it to fade in with the 'transitions' class without fading out first. Check out this code sample: http://jsfiddle.net/chovy/t37k3/9/ <div></div> <a href="#" class="s ...

jquerycsscss-transitions

Why does the second JavaScript form validation not function correctly when compared to the first?

Here is a form that I have created: <form action="next.html" id="userInput" method="post" onsubmit="return validate();"> Age: <input type="text" name="age" id="age"/> function validate() { var age = document. ...

javascripthtmlforms

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling