0

I'm making text bold on hover, but since it's moving so much when it's on hover, it looks odd now. Here's what it looks like: https://i.stack.imgur.com/AtVjT.jpg

Update: To clarify, I think the selected answer here Inline elements shifting when made bold on hover should work in my case - it indeed worked for another set of code I wrote elsewhere. However, it's not working for this set of code, and I'm not sure why. Is there something wrong with my code here?

.accordion::before {
    display: block;
    content: attr(title);
    font-family: 'Gotham-Medium';
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

Thanks in advance

Html:  
<button class="accordion" title="Lorem ipsum dolor sit amet?">Lorem ipsum dolor sit amet?</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp.</p>
</div>



<button class="accordion">Lorem ipsum dolor sit amet?</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp.</p>
</div>




.accordion {
  background-color:#FFFFFF; 
  color: #67636E;  
  color: var(--main-color);
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;  
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.9;  
}


.active, .accordion:hover {
  font-family: 'Gotham-Medium'
}

.accordion::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}


.panel {
  background-color: white;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  margin-top: 0;
  margin-bottom: 0;
}
user2277916
  • 103
  • 1
  • 4
  • 13
  • 1
    Does this answer your question? [Inline elements shifting when made bold on hover](https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover) or [CSS: bolding some text without changing its container's size](https://stackoverflow.com/questions/40868388/prevent-to-move-text-while-changing-its-font-weight) or [navigation moves on bold hover](https://stackoverflow.com/questions/15338635/navigation-moves-on-bold-hover) – caramba Oct 06 '20 at 08:11
  • the first link seems to have a good answer (the selected answer) - i feel like this should work in my case too, but as I shared in my post, I tried the solution but it didn't work. is there something wrong with my code here? --> .accordion::before { display: block; content: attr(title); font-family: 'Gotham-Medium'; height: 0; overflow: hidden; visibility: hidden; } – user2277916 Oct 06 '20 at 08:22
  • 1
    looking at your code you change the font on :hover. another font (or changing it to bold) will take up another amount of space. That will make it jump. You could try set font-sizes, line-height etc. to make it less jumpy or consider another `:hover` effect – caramba Oct 06 '20 at 10:06
  • I think the first answer here https://stackoverflow.com/questions/64221657/using-bolder-font-on-hover-using-font-family-text-moves margin-right: -2.8px; /* cancel the margin on right that is produced */ could work in my case since mine's jumping to top (so I'll use margin top negative value) - but how was this -2.8px value calculated? – user2277916 Oct 08 '20 at 05:18
  • update: I was able to fix it using text shadow. Thank you – user2277916 Oct 08 '20 at 05:37

1 Answers1

0

Unfortunetely this is the nature of css and bold text. What you could do is picking another font. This might minimize the shift.

Sidenote: The code you posted changes the font-family on hover instead of making it bold, thus does not represent your issue.

Anzor Asadov
  • 274
  • 2
  • 13