CODEWITHSUNDEEP
htmlcss
bethabernathy
bethabernathy

Reputation: 53

Underline only text not any longer

I have gone through most everything that I could find without luck. I want to underline text links only from the beginning of the text link to the end. I would think this is something that should be pretty simple. The website that I am working on is at:

http://tahoe-luxury-properties.com/index4.html

The links on the top navigation have borders on the bottom but they are expanding larger than the text link. I am using the following css:

.hot-menu {
    font-size: 13px;
    letter-spacing: 1.1px;
    font-weight: 400;
    font-family: "Oswald", Arial, Helvetica;
    line-height: 20px;
    float: left;
    text-align: center;
    border-bottom-color: #0CF;
    border-bottom-style: solid;
    display: table;
    border-bottom-width: fit-content;
    margin: 5px;
}

If anyone has any ideas that would be great. Thanks. -Beth

Upvotes: 1

Views: 1992

Answers (5)

Marko Sikman
Marko Sikman

Reputation: 405

Use a combination of pseudo-selector :after and add width: fit-content; to your desired element (in your case 'a' element):

a {
    width: fit-content;
}

a:after {
    content: "";
    border-bottom: 4px solid #000000;
    width: 100%;
    height: 4px;
    display: flex;
}

The width of the underline will be as much as the width of your text.

Upvotes: 1

l0w_skilled
l0w_skilled

Reputation: 830

The borders are applied to the element, which has a padding.

padding: 7px 11px;

Padding applies to the inside of the element, thus stretching the element. The border is applied to your element, taking into account that the padding is stretching it.

Try changing your style to:

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 7px 0;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "abc-modern",sans-serif;
}

li a + a {
    margin-left: 11px;
}

The a + a selects every a-Element that is preceded by an a-Element.

In case that you want to keep some space left and right in your a-Element, for easier clicking purposes or w/e.

You can try the following (didn't test it):

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 7px 11px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "abc-modern",sans-serif;
}

.hot-menu:after {
    content: "";
    display: block;
    background-color: #0cf; //colors are written in small characters usually
    height: 5px;
    width: calc(100% - 11px);
    position: absolute;
    left: 11px;
    bottom: 0;
}

Upvotes: 1

Siful I
Siful I

Reputation: 1932

remove border form .hot-menu add style 

li a {
     border-bottom: 1px solid #0CF;
     padding: 7px 0px;
}

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

Reduce your padding, increase your margin. Your <a class='hot-menu'> tags are inheriting 11px of horizontal padding from li a. Border will span padding, but not margin. Run the snippet to see the comparison:

.hot-menu {
  font-size: 13px;
  letter-spacing: 1.1px;
  font-weight: 400;
  font-family: "Oswald", Arial, Helvetica;
  line-height: 20px;
  float: left;
  text-align: center;
  border-bottom-color: #0CF;
  border-bottom-style: solid;
  display: table;
  border-bottom-width: fit-content;
  margin: 5px;
  padding: 7px 11px; /* <-- This is inherited from li a */
}

.hotter-menu {
  font-size: 13px;
  letter-spacing: 1.1px;
  font-weight: 400;
  font-family: "Oswald", Arial, Helvetica;
  line-height: 20px;
  float: left;
  text-align: center;
  border-bottom-color: #0CF;
  border-bottom-style: solid;
  display: table;
  border-bottom-width: fit-content;
  margin: 5px 10px; /* <-- Fix */
  padding: 7px 0px; /* <-- Fix */
}
<a class="hot-menu">Old Version</a>
<a class="hotter-menu">New Version</a>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You have left/right indents on all <a> which are appearing inside <li> on your page.

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 7px 11px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "abc-modern",sans-serif;
}

Override this styling as shown below to remove left/right indents.

.hot-menu li a {
  padding-left: 0;
  padding-right: 0;
}

Upvotes: 0

Related Questions