What is the best way to create more space between written text and the line beneath it?

Here's how my bootstrap navbar appears: https://i.sstatic.net/ZPe9c.png

As I hover over each menu option, there is an animated underline that displays like so: https://i.sstatic.net/JWKWy.png

Is there a way to widen the space between the text and its underline?

Answer №1

One way to address your issue is by using a border instead of an underline. Here's the suggested code:

ul.ml-auto > li > a > span{
    font: 15px Roboto,sans-serif;
    font-weight: 500;
    position: relative;
    display: inline-block;
    color: #FFFFFF80;
    overflow: hidden;
      padding-bottom: 5px;
    }
    ul.ml-auto > li > a > span::before {
    position: absolute;
    content: attr(data-content);
    color: #00FFFF;
    clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    transition: clip-path 275ms ease;
      display: block;
      border-bottom: 1px solid #00FFFF;
      padding-bottom: 3px;
    }

Answer №2

It is not possible to adjust the spacing when using text-decorate: underline.

The code includes <:before> which causes the spacing of inline style span to be fixed with its content.

To resolve this issue, add padding for your element and <:before>, then use border-bottom inside :before tag:

ul.ml-auto > li > a > span{
   ///Add bottom-padding here
   padding-bottom: 3px; // the desired spacing - 1 as the border will take 1px height
}

ul.ml-auto > li > a > span::before {
   border-bottom: 1px solid red;
   padding-bottom: 2px;
}

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap Resize</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>;

   <style type="text/css">
    .navbar-custom { 
    background-color: #484848;
    }

    ul.ml-auto > li > a > span{
    font: 15px Roboto,sans-serif;
    font-weight: 500;
    position: relative;
    display: inline-block;
    color: #FFFFFF80;
    overflow: hidden;
    padding-bottom:2px;
    }
    ul.ml-auto > li > a > span::before {
    position: absolute;
    content: attr(data-content);
    color: #00FFFF;
    border-bottom: 1px solid red;
    padding-bottom:2px;
    clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    transition: clip-path 275ms ease;
    }
    ul.ml-auto > li > a > span:hover::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
   </style>

   <body>                 
    <nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a  style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about"><span data-content="LOREM">LOREM</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#expertise"><span data-content="LOREM">LOREM</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio"><span data-content="LOREM">LOREM</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact"><span data-content="LOREM">LOREM</span></a>
            </li>
          </ul>
        </div>

      </div>
    </nav>
   </body>
</html>

Answer №3

Check out this example of HTML to add padding to the top and bottom of a list in a menu:

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 <ul class="ml-auto navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="">Contact</a>
 </li> 
 <li class="nav-item">
 <a class="nav-link" href="">About me</a>
 </li> 
 <li class="nav-item">
 <a class="nav-link" href="">Features</a>
 </li> 
  </ul> 
   </div>
  </nav>

And here is the CSS code to underline the list items:


li{
    text-decoration: underline;
    text-underline-position: under;
}

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

Binding data to an MVC grid component

I am working with asp.net mvc3.0 razor framework and using an html Table to populate data from ViewBag based on the selected option in a dropdownlist. public ActionResult Index(GetFileName fn) { .... ViewBag.Grid1Data = dt; return View(); } Initially, th ...

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

The issue I'm facing is that the Bootstrap 4 modal is not visible when I

In my component, I am iterating through data and passing it to another component as props repeatedly. The bootstrap modal is working smoothly with no errors at all. Take a look at my code snippet: render() { const { datas, amt, dis_price, type_dis_price ...

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...

I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

I am facing an issue with a div and table on my webpage: <div id="tablediv"> <table id="table"> <tr><th>headers</th></tr> <tr><td>contents</td></tr> </table> <d ...

Having trouble getting CSS absolute and relative positioning to work with my div slider carousel

I'm currently working on creating a slider carousel using VUE, where the CSS classes (3 divs) are looped through. However, I am facing an issue where every time a div fades out, the next slider creates a duplicate slider at the bottom, resulting in tw ...

Link Tag and the Download Functionality in HTML

I'm looking for a way to deactivate the "download" attribute in an anchor tag, like download="false": <a href="https://cdn1.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png" download></a> In my AngularJS application, I want all image fi ...

How can I retrieve the background color of the WordPress admin page?

Is there a way in PHP to extract the current active colors of specific elements like #wpadminbar or #adminmenu .wp-submenu from the admin page for my plugin? I am not interested in getting the schema names (base, focus, current)! Here is an example code s ...

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

What is the reason for having the navigation bar stretch across the entire width of the mobile device?

NEW QUESTION: How Can I Fix the Navigation Bar Issue on Mobile Devices? I apologize for any language issues as I am using a translator. Hello, I have encountered an issue with a website form containing a price list. When viewed on a mobile device, all the ...

Tips for eliminating corner gaps in css

As I dive into the world of CSS, I encountered an issue while working on my webpage. The problem lies in a space that appears on my displayed webpage. .grouping:before, .grouping:after { content: " "; display: table; } .grouping:after { clear: bo ...

Why does the modal window gracefully descend when the mobile keyboard is activated?

I designed a modal window that has a fixed position: <div className={classes['UIModal'] + ' ' + classes[transition]} onClick={() => dispatch(modalHandler('offer'))} > <div className={classes['UIModal__ ...

"Encountering issue with SCSS variable not being applied to background in file

$enable-grid-classes: false; $enable-cssgrid:true; $deepBlue: #032f3e; body { --bs-body-bg: orange ; } @import "https://fonts.googleapis.com/css2?family=Space+Grotesk:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463121 ...

Trouble arises as the Raspberry Pi GPIO pins refuse to toggle

Encountering an intriguing issue here. I've developed a Python program to regulate the climate of a room with a web interface. While the program functions properly, upon restarting the Raspberry Pi, all GPIO pins are activated. It's only after ac ...

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

pointing out the existing issues with the menu

I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the funct ...

Interacting with a button element specified with the role attribute inside a div container using Selenium

Is there a way to interact with the button using the HTML tag provided below? <div class="_1WZqU PNlAR" role="button">OK</div> I attempted the following methods: driver.findElement(By.xpath("//button[text()='OK']")).click(); driver ...

Animating the navbar with CSS transitions

https://i.sstatic.net/cV3X6.png Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should dis ...

The Angular material slider experiences issues with functionality when paired with the *ngFor directive

Having a unique problem that I could easily replicate on stackblitz. When using multiple mat sliders generated from a *ngFor loop with numbers as values, encountering an issue where moving the first slider affects all others. Subsequent drags only update ...