cybermonkey cybermonkey - 5 months ago 8
CSS Question

Is it possible to increase the padding of an element while not affecting its border?

I have a navigation bar that includes the usual links, and to improve the user experience I have a bottom border show on hover:

enter image description here

I achieve this with the following code:



body {
background-color: #E9EBEE;
color: #666666;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
}
.nav {
padding-top: 50px;
padding-bottom: 5px;
margin-top: 2em;
margin-bottom: 6em;
background-color: #F6F7F9;
color: #666666;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.nav > .links {
margin-top: -36px;
border-left: solid 1px #E9EBEE;
font-size: 0.8em;
}
.nav > .links > .link {
float: left;
position: inherit;
border-right: solid 1px #E9EBEE;
border-bottom-width: 2px;
width: 8em;
transition: border-color .2s;
}
.nav > .links > .link:hover {
border-bottom: solid;
border-bottom-color: #3B5998;
border-bottom-width: 2px;
color: #3B5998;
}

<body>
<div class="nav">
<div class="links">
<div class="link">
Servers
</div>
</div>
</div>
</body>





I'd like the border to be on the bottom of
nav
; to do this I added
padding-bottom:11px;
to
.nav > .links > .link
, which resulted in this:

enter image description here

The result is exactly what I wanted, however notice that the right and left borders of each navigation item has been extended; something that I should've realised would happen when adding the
padding-bottom
attribute to
.nav > .links > .link
.

To fix this I thought that I could use a
border-bottom-height
since there is a
border-bottom-width
but apparently no such thing exists, and I don't want to use an additional element if possible to provide the left & right borders. As seen in the first image, the left and right borders should be approximately the height of the text contained.

Is this possible without an additional 'wrapper' element?

Answer

Use a pseudo element instead, this one uses :after

body {
  background-color: #E9EBEE;
  color: #666666;
  margin: 0px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.nav {
  padding-top: 50px;
  padding-bottom: 5px;
  margin-top: 2em;
  margin-bottom: 6em;
  background-color: #F6F7F9;
  color: #666666;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
}
.nav > .links {
  margin-top: -36px;
  border-left: solid 1px #E9EBEE;
  font-size: 0.8em;
}
.nav > .links > .link {
  float: left;
  position: relative;
  border-right: solid 1px #E9EBEE;
  border-bottom-width: 2px;
  width: 8em;
  transition: border-color .2s;
}
.nav > .links > .link:hover:after {
  content: '';
  position: absolute;
  top: calc(100% + 11px);
  left: 0;
  width: 100%;
  height: 2px;  
  background: #3B5998;
}
<body>
  <div class="nav">
    <div class="links">
      <div class="link">
        Servers
      </div>
    </div>
  </div>
</body>