how to stop the unwanted link movement while hovered using "Flex" as display?

Question

I want the links to stop having extra movements while hovering.

When I add 'position: absolute' to the links, that stops the unwanted movements.

But by doing so, the links jump out of the normal 'display:flex' flow.
Therefore, I prefer not to add 'position: absolute'.

What is the best way to stabilize links while hovering using 'Display: flex;'?
(HTML and CSS solutions only)

HTML

<!DOCTYPE html>

<html>

<head>
  <link href="portfolio1.css" type="text/css" rel="stylesheet">
</head>

<body>
<section>
  <h2 class="seperate">Topics</h2>
  <ul>
    <li ><a class="nav" href="#">HTML</a></li>
    <li ><a class="nav" href="#">CSS</a></li>
    <li ><a class="nav" href="#">Javascript</a></li>
  </ul>
</section>
</body>
</html>

CSS

* {
  margin: 10px auto;
}

body {
  color: white;
  font-family: Helvetica;
  text-align: center;
}

h2 {
  font-family: "Times New Roman";
  border: 2px solid pink;
  width:30%;
  margin: 20px auto;
  padding: 10px auto;
}

section {
  background-color: #FF745C;
  border-top: 5px dotted tomato;
  margin: 10px auto;
  height: 100%;
  width: : 100%;
  overflow: scroll;
  /*display: flex;*/
}

section ul{
  width: 100%;
  margin: 0 auto;
  list-style-type: none;
  display: flex;
  padding-left:0;

}

section ul li {
    display: inline-flex;
    margin: 10px auto;

}

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
}

a:hover {
  border: 1px solid #FF441F;
  border-radius: 10px;
  font-weight: 600;
  transition: border, border-radius, font-weight 150ms ease-in;
}

score 0 · Accepted Answer · answered Dec 23 '20 at 14:11

0

If you add a border on hover that isn't present by default, this can change the element's dimensions. Try adding an invisible border by default so that only the color changes:

a {
  border: 1px solid transparent;
}

a:hover {
  border-color: #FF441F;
}

answered Dec 23 '20 at 14:11

Marin Carroll

61
5

Thanks a lot! It works.. I truly appreciate ⭐️ – mmirbekian Dec 23 '20 at 14:14
Your answer is more convenient than mine. – Sato Takeru Dec 23 '20 at 14:14

score 0 · Answer 2 · answered Dec 23 '20 at 14:13

0

I solved your problem by editing style of a tag.

a {
  width: 100px;
  height: 20px;
  background-color: #FF9985;
  border-radius: 5px;
  color: white;
  border: 1px solid #FF9985;
}

answered Dec 23 '20 at 14:13

Sato Takeru

1,669
4
12
27

Thank you so much George! Yes , this works! ✨ – mmirbekian Dec 23 '20 at 14:18

how to stop the unwanted link movement while hovered using "Flex" as display?

2 Answers2