I don't understand what happens when I try to achieve a bottom border in CSS without using the bottom property

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

Is there a way to remove the bottom border on hover that is not affected by CSS?

.bb-custom-wrapper>nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #524b96;
  /* #524b96  #1baede*/
  color: orange;
  font-size: 0;
  margin: 2px;
}

.bb-custom-wrapper>nav a:hover {
  opacity: 0.6;
}

.bb-custom-icon:before {
  font-family: 'arrows';
  /* speak: none; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 30px;
  line-height: 40px;
  display: block;
  /* -webkit-font-smoothing: antialiased; */
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
  content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
  content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
<nav>
  <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
  <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
  <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
  <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
</nav>

I have not added any bottom border, but when I hover over the button, it shows up in the output image. Can you help me understand why this is happening?

htmlcss

Answer №1

It's easy to distinguish that this is not a border – it does not cover the entire length of the element and lacks the curved edges typical of border-radius.

Consider including text-decoration: none in your link styles for a cleaner look on hover.

Answer №2

To remove any underline on your hyperlinks, use text-decoration: none

.bb-custom-wrapper>nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #524b96;
  /* #524b96  #1baede*/
  color: orange;
  font-size: 0;
  margin: 2px;
}

.bb-custom-wrapper>nav a:hover {
  opacity: 0.6;
}

.bb-custom-icon:before {
  font-family: 'arrows';
  /* speak: none; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 30px;
  line-height: 40px;
  display: block;
  /* -webkit-font-smoothing: antialiased; */
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
  content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
  content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

a,
a:hover {
  text-decoration: none;
}
<nav>
  <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a>
  <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
  <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
  <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a>
</nav>

The addition of 

a,a:hover {text-decoration: none;}
to the code should resolve the bug you are experiencing.

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

javascript The onclick function works only for a single interaction

Every time I click on the Button, the first click triggers func1 successfully. However, subsequent clicks fail to execute the function. Even the alert('func1') statement is not being displayed. What mistake am I making here? func ...

javascriptjqueryhtmlajax

Is there a way to replicate this exact toggle selection functionality from Angular Material using just HTML and CSS?

I'm attempting to incorporate this functionality into my Angular project ( link ), but I'm facing challenges with styling it using CSS. Could this be due to limitations in overriding the default settings? I came across this helpful resource: sour ...

htmlcssangularangular-materialnssegmentedcontrol

Unable to successfully submit my form due to duplicate values in two <option> elements

UPDATE : My analysis of the issue was incorrect, all values equal to 0 are causing problems. You're right, it seems like the issue stems from the function itself. Do you have any suggestions on how to enhance that function? I'm facing an issue w ...

phphtml

Tips for Expanding the Height of a Parent Div to Fill Its Containing Parent

I am experiencing some difficulty with a seemingly simple task. My goal is to have the lime-colored background expand and fill 100% of the current height of its parent container (in this case, the magenta-colored section). Here is a live example: https:/ ...

htmlcssresponsive

Having trouble scrolling through autocomplete suggestions?

Check out my code snippet below: HTML <input type="text" id="txtCity" /> <div id="customDropdownCities" style="position:absolute; top:0; left:0px; height:1px;"></div> CSS .ui-widget-content a { ...

jquerycssjquery-uiautocomplete

List Elements Not Displaying Correctly due to CSS Styling Issues

After spending several hours trying to solve this problem, I've hit a roadblock. The challenge lies in dynamically adding items to a list using JavaScript and the Dojo library. I've experimented with both vanilla JS and Dojo code, ruling that pa ...

javascripthtmlcssdojo

determine the vertical dimension of the horizontal scrollbar

I ran into an issue where I needed to determine the height of a horizontal scrollbar. This question and answer recommended using the clientHeight property to calculate the difference. Unfortunately, this method no longer works as shown here: https://jsfid ...

javascripthtmlcss

Show information retrieved from a MySQL table within a <span> element

I am attempting to showcase data from a MySQL table within a that is nested inside another , but I am encountering a syntax error in the echos when trying to display the $data. I am having trouble understanding why this error is occurring. Here is the cod ...

phphtmlmysql

jQuery concealing selections from dropdown menus

Is there a way to use jquery sort to order dropdown list options and hide the "select" item in the dropdown? Check out my fiddle code here <select id="mySelect"> <option value="">select</option> <option value="1">a</opt ...

jqueryhtmlsortingselecthide

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

What could be causing my divs to collide with each other in a Javascript environment?

As you may be aware, my current task involves assigning random positions from a list to various div elements. The code I am using to achieve this is as follows: var list = [100,210,320,430]; var square1 = document.getElementById("square1") var sq ...

javascripthtmlcssrandomposition

What is the best way to link buttons to specific drop down sections?

How can I create multiple drop down divs with different content for each button click? JSFiddle: http://jsfiddle.net/maddiwu/xe6xtfqh/ .slide { overflow-y: hidden; max-width: 100%; overflow-x: hidden; max-height: 100vw; /* approximate ...

javascripthtmlcss

Issues with Organizing Bootstrap Card Layout

I'm in need of assistance with creating a responsive Bootstrap card grid. My goal is to have a grid layout with 6 cards, initially displayed as 2 rows of 3 cards. As the screen size decreases, I want the layout to adjust accordingly to maintain reada ...

htmlcssbootstrap-4grid

Determine the sum of the values in a column using Angular

I have a collection of objects with a 'quantity' field that I want to aggregate and display on a review screen within a table. My array consists of administrations with various object fields, and my focus is on calculating the total of the &apos ...

htmlangulartypescript

The right-floating div element is not displaying horizontally; instead, it is breaking into a new line

My issue is the dynamically added div elements are not displaying horizontally within a container div element with a specific width. They always break into a new line. Below is the code snippet I am using: var i=1; $(document).ready(function () { ...

jqueryhtmlcss

Having trouble retrieving accurate text information from a JavaScript link

I am encountering an issue with my code which consists of links with divs inside them. When I click on a link, it should display another div with data for "Case No" and "Type". However, the problem is that it only fetches the data from the first link click ...

javascripthtml

Display the preload.gif before the image finishes loading

I have a collection of images in a gallery and I want to assign a class name to all image tags, so that before they finish loading they show a preload.gif. Once the image finishes loading, it should display the actual image. I attempted to achieve this usi ...

javascriptjqueryhtmlcss

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

Tips for preserving line breaks when sending a message through the mail

Hi, I'm currently facing an issue: I am trying to send text from a textarea using POST to a PHP script that will write it to a file and display it on the website. However, when I do this, the line breaks disappear and the displayed text ends up lookin ...

javascriptphphtmlhttp

What is the best way to incorporate this design utilizing the Bootstrap Grid system?

I am trying to create a grid structure using the code below: <div class="col-lg-8"> <div class="col-lg-6"> <div class="panel panel-primary"> <!-- Default panel contents --> <div class="panel- ...

htmlcsstwitter-bootstrap