How to put border on link without increasing menu size

Question

How to put border on link without increasing menu size

Navigation

#1 by (5 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I have a menu, and wanted to place the mouse over the link had a border, I managed to put it, but the problem is that it increases the size of the menu when the border appears, how to avoid this?

Current Code:

    .main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    text-align:center;
    margin:3px 0 0px;
    padding:0;
    list-style:none;
    max-height: 75px;
}
.main-nav li{
    display:inline;
    margin:0 1px;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    font-size: 20px;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #154372;
    outline: none;
    text-decoration:none;
    color: #154372;
}

css

asked by anonymous 22.02.2018 / 13:13

3 answers

0

Another way is to use the pseudo-element ::after hidden that will only appear in :hover .

So you include a border in ::after and size it with less than 2px of the total button size. This will not affect the size of the menu.

See the example of how it would look:

body{
   background: #000;
}

.main-nav{
    text-align:center;
    margin:3px 0 0px;
    padding:0;
    list-style:none;
    xmax-height: 75px;
    background: #fff;
    min-height: 74px;
}

.main-nav li{
    display:inline;
    margin:0 1px;
}

.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    position: relative;
}

.main-nav li a:hover{
    font-size: 20px;
    padding: 10px;
    outline: none;
    text-decoration:none;
    color: #154372;
}

.main-nav li a:hover::after{
    display: block;
}

.main-nav li a::after{
   content: '';
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   border: 1px solid #154372;
   border-radius: 3px;
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}

<ul class="main-nav">
   <li><a href="#">Botão 1</a></li>
   <li><a href="#">Botão 2</a></li>
</ul>

22.02.2018 / 17:12

0

There are two more options that can and should be met with box-shadow and another with calc() deducting from height and width edge thickness.

Option 1: Using box-shadow with inset and spread-radius inclusive with this technique you can make multiple borders in and out of the element without affecting anything that is around!

/ p>

OBS: spread-radius is the fourth property parameter, it is optional and you may not always use it. I put between "4px" just to visualize you better.

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px " 4px " rgba(0, 0, 0, 0.2);

See the example below, I used as a basis the model of our friend @Bacco who is well didactic.

html, body {
    width: 100%;
    height: 100%;
    margin: 20px;
    padding: 0;
}
div { 
    display:inline-block; vertical-align:middle;
    width:120px;height:60px; background-color:#fcc;
    text-align:center; 
}
#a { box-shadow: 0 0 4px black inset; }
#b, #c { box-shadow: 0 0 0 4px black;}
#c { box-shadow: 0 0 0 4px black inset; }
#e { box-shadow: 0 0 4px black inset, 0 0 0 4px black, 0 0 0 6px red, 0 0 0 8px lime, 0 0 0 10px purple;}

<div id="a">box-shadow inset sem "spread-radius"</div>
<div id="b">com box-shadow</div>
<div id="c">box-shadow inset com "spread-radius"</div>
<div id="d">sem box-shadow</div>
<div id="e">várias box-shadow e 1 inset</div>

Here you can read more about the box-shadow property: link

Option 2: In this technique you will centralize the contents of the DIVs with Flex-Box and then put the Embroidery in :hover but discounting the width width of the height and width of Div

Ex: If you have a border of 4px you will have to shoot 8px of the height and width of the DIV, 8px as they are 4px on each side, so we have 8px

div:hover {
    border: 4px solid black;
    width:calc(120px - 8px);
    height:calc(60px - 8px); 
}

See in the example below the applied technique

html, body {
    width: 100%;
    height: 100%;
    margin: 20px;
    padding: 0;
}
div { 
    background-color:#fcc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 2px;
    width:120px;
    height:60px; 
}
div:hover {
    cursor: pointer;
    border: 4px solid black;
}
div.calc:hover {
    cursor: pointer;
    border: 4px solid black;
    width:calc(120px - 8px);
    height:calc(60px - 8px); 
}

<section style="display: flex;flex-direction: row;">
    <div class="calc">COM calc()</div>
    <div class="calc">COM calc()</div>
    <div>SEM calc()</div>
    <div>SEM calc()</div>
</section>

22.02.2018 / 15:26

Error closing form with TAcroPDF in Delphi Merge two arrays

score 5 · Accepted Answer

`box-sizing`

There is a property that controls this, box-sizing :

box-sizing: border-box;

When used along the line above, causes the element measure to include the border. In other words, with border-box the thickness will be discounted from the contents and not from the environment.

`outline`

Alternatively you can use outline instead of border . outline is a visual element that does not affect layout :

Compatibility: link

It's up to the designer to analyze which one is best suited to your specific case, given the difference in behavior regarding content and spacing.

Demonstration

box-sizing:

div    { display:inline-block; vertical-align:middle;
         width:100px;height:60px; background-color:#fcc;
         text-align:center; }

#b, #c { border:4px solid black; }
#b     { box-sizing:border-box; }

<div id="a">sem borda</div>
<div id="b">border-box</div>
<div id="c">padrão</div>
<div id="d">sem borda</div>

outline:

div    { display:inline-block; vertical-align:middle;
         width:100px;height:60px; background-color:#fcc;
         text-align:center; }

#b, #c { outline:4px solid black; }
#c     { outline-offset:-4px; }

<div id="a">sem outline</div>
<div id="b">com outline</div>
<div id="c">outline<br>com offset</div>
<div id="d">sem outline</div>