Ways to create a border button with a matching width to the text above using CSS

Is it possible to style a border button in CSS so that the width matches the text above?

I am trying to achieve a clean look for the navigation selected text, where the border-bottom aligns with the text above. Here is an example of what I have attempted so far:

.nav-link {
    padding-right: 29px;
    padding-left: 29px;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }

.nav-link.active {
    border-bottom: 1.5px solid #000;
    color:  #000;
  }
<div class="container">
<nav role="navigation" class="menu">
  <a href="#" class="nav-link active item">One</a>
  <a href="#" class="nav-link item">Two</a>
  <a href="#" class="nav-link item">Three</a>
  <a href="#" class="nav-link item">Four</a>
  <a href="#" class="nav-link item">Five</a>
  <a href="#" class="nav-link item">Six</a>
  <a href="#" class="nav-link item">Seven</a>
</nav>
</div>

htmlcss

Answer №1

Try using margin-right and margin-left instead of padding-right and padding-left.

.nav-link {
    margin-right: 29px;   /*use margin-right */
    margin-left: 29px;    /*use margin-left */
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }


.nav-link {
    margin-right: 29px;
    margin-left: 29px;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    font-family: Lato, sans-serif;
    color: rgba(51, 51, 51, 0.53);
    line-height: 20px;
    font-weight: 300;
    cursor: pointer;
  }

.nav-link.active {
    border-bottom: 1.5px solid #000;
    color:  #000;
  }
<div class="container">
<nav role="navigation" class="menu">
  <a href="#" class="nav-link active item">Cupertino</a>
  <a href="#" class="nav-link item">New York City</a>
  <a href="#" class="nav-link item">London</a>
  <a href="#" class="nav-link item">Amsterdam</a>
  <a href="#" class="nav-link item">Tokyo</a>
  <a href="#" class="nav-link item">Hong Kong</a>
  <a href="#" class="nav-link item">Sydney</a>
</nav>
</div>

To eliminate underlines from all hyperlinks ( tags), apply text-decoration:none;

a {
  text-decoration: none;
}


a {
  text-decoration: none;
}

.nav-link {
  margin-right: 29px;
  margin-left: 29px;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  font-family: Lato, sans-serif;
  color: rgba(51, 51, 51, 0.53);
  line-height: 20px;
  font-weight: 300;
  cursor: pointer;
}

.nav-link.active {
  border-bottom: 1.5px solid #000;
  color: #000;
}
<div class="container">
  <nav role="navigation" class="menu">
    <a href="#" class="nav-link active item">Cupertino</a>
    <a href="#" class="nav-link item">New York City</a>
    <a href="#" class="nav-link item">London</a>
    <a href="#" class="nav-link item">Amsterdam</a>
    <a href="#" class="nav-link item">Tokyo</a>
    <a href="#" class="nav-link item">Hong Kong</a>
    <a href="#" class="nav-link item">Sydney</a>
  </nav>
</div>

Answer №2

Here is a code snippet that may be of assistance to you:

.nav-link.active {
border-bottom: 1.5px solid rgba(51, 51, 51, 0.53);
box-shadow: inset -29px 0 0 0 #fff, inset 29px 0 0 0 #fff, inset 0 -1px 0 0 #000;
color:  #000;
}

Answer №3

It seems like you're asking how to apply the same CSS class used for styling the navbar to another element. You can achieve this by simply adding the class name to the other element. For instance,

london

If you want to apply the "css-style" class to another element, you just need to include it in the HTML structure of that element.

Next, you can define the styles for this class by using the following code snippet:

.css-style:active { \place your code for active state here }

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

Tips for adding an svg element to an existing svg using d3.js

Can another SVG be appended to an existing SVG parent using d3.js? I have tried using the 'svg:image' attribute, but unfortunately, I lose full control over the inner SVG child. The DOM node is created by d3, but it is not rendered, resulting i ...

javascripthtmlangularjsd3.jssvg

A simple guide on implementing the aria-required attribute into the Material-UI select component

I need some help with implementing the 'aria-required' property on a Material-UI component. Has anyone had success with this before? I haven't tried anything yet since there isn't any information about it in the docs. Thank you in advan ...

htmlreactjsmaterial-uiaccessibility

The Ajax contact form is not submitting the necessary POST data to the PHP script

After creating an html form with ajax: function confirmSendMail() { $(".send_contact").click(function(event){ event.preventDefault(); var name = $("#inputName").val(); var email = $("#inputEmail").val(); var pho ...

phphtmlajax

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function

I am working on an HTML page and I am trying to create a link that appears to go to 'example.html' but actually goes to 'javascript:ajaxLoad(example.html);'. Here is what I have tried: <a href="example" onclick="javascipt:ajaxLoad( ...

javascripthtmlhttp-redirecthyperlink

CSS: Trouble with getting SVG sprite to work

I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter thi ...

csssvg

Perform a function in jQuery only after the previous one has finished running in a cascading manner

Looking for guidance from an expert on how to accomplish this task. I have HTML code for a multiple choice question with options A to E: <div id="correct-answer-XXXXX" style="display:none;"></div> <div id="wrong-answer-XXXXX" style="display ...

javascriptjqueryhtmlcssajax

Determine if the content within the YouTube iFrame has been updated

I currently have an iframe on my webpage that does not initially display a video. However, when the user clicks a button, a Youtube video will be loaded into the iframe. I am trying to detect when the video has finished loading by using the on() method t ...

jqueryhtmliframeyoutube

Choose the grandparent of an element's parent

Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...

javascripthtmlcss

What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list ...

htmlcssreactjs

Fluidity in CSS Video

I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...

htmlcss

Tips for testing the website's color modifications?

I recently had the task of replacing 10 specific colors with new ones in my CSS files. I used the find and replace method to make the changes in over 300 places throughout all the files. Now, I need a way to test if all the color replacements were done c ...

javascripthtmlcsstestingcolors

What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color? https://i.sstatic.net/WbVuv.png I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this ...

htmlcss

What is the method to make a CSS selector avoid selecting a specific element?

Let's say I have a CSS style that looks like this: input.validation-passed {border: 1px solid #00CC00; color : #000;} The JavaScript validation framework I am using injects every input tag with a class="validation-passed". While this works fine ...

javascripthtmlcss

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

This script is functioning properly in browsers like Chrome and Firefox, however it is encountering issues when used with Internet Explorer. An error message is displayed in the IE console: SCRIPT5007: Unable to set value of the property 'href': ...

javascriptphpjqueryhtmlinternet-explorer

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

I am working on a web application similar to mini-tweets. The content for the posts is retrieved from a database and I want to include an 'up vote' button for each post, similar to the image shown below. https://i.sstatic.net/kJySO.png Each pos ...

pythonhtmlflaskformshttp-post

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax

Sending HTML parameters to a PHP file

I have been trying to pass the parameters from the current HTML page to a PHP page using a form. In my header in the HTML, I currently have the following function: <script> function getURLParameter(name) { return decodeURIComponent((new Re ...

javascriptphphtml

html form-- assistance required in making new input area appear upon clicking radio button

Currently, I am in the process of creating a basic customer database using mysql and php. My goal is to have extra input fields appear for mailing address when users click on the radio button labeled "different mailing address". However, I'm unsure ab ...

phpjqueryhtmlmysql

Embed SQL parameter into HTML code

Every 24 hours, I have a SQL job that sends an email containing data extracted from my database tables. I store the data in : DECLARE @ReportContentBuilder table(LineSequence int identity, Line varchar(2000)) Here's how it's done : INSERT IN ...

htmlsql