Keep Width When Using Letter-Spacing on Hover

Keep width when using letter-spacing on hover

On idea to approximate this is to duplicate the text considering a hidden one that has already the letter-spacing and another one on the top that you animate to fill the space already defined by the hidden text:

Here is an idea by making the text color the same as background:

.btn {

  display: inline-block;

  text-align: center;

  background-color: transparent;

  border: 1px solid transparent;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  border-radius: 0.25rem;

  cursor: pointer;

  transition: all 0.2s ease;

  margin-bottom:10px;

}

.btn-primary {

  background-color: #8065F1;

  color: #FFFFFF;

}

.btn-large {

  border-radius: 32px;

  box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);

  padding: 0.25rem 3rem;

  font-size: 1.5rem;

  text-transform: uppercase;

}

.btn::before {

  content:attr(data-text);

  position:absolute;

  left:0;

  right:0;

  text-align:center;

  letter-spacing: initial;

  color:#fff;

  transition: all 0.2s ease;

}

.btn {

  letter-spacing: 4px;

  color:#8065F1;

  position:relative;

}

.btn:hover::before {

  letter-spacing: 4px;

}

<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button></div>

<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button></div>

<div><button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button></div>

Letter-Spacing moving other divs when hovering

your element width is set to the minimum and due to margin and other layout properties it gets to move the others you should give your .nav__subh some static width and it is possible in only block position so try adding this in your css

 .nav_subh {
        color: white;
        text-align: center;
        margin: 1rem;
        overflow: hidden;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 2px;
        transition: .3s ease-in-out;
        width: 5rem;
        display: block;
    }

Inline elements shifting when made bold on hover

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Hover spacing under text

1. How to expand spacing between text menu and hover image?
   
   Add the padding-bottom: 12px. Change the 12px to your choice of value, this adjusts the horizontal spacing. Add 0 bottom to the background tag, this keeps the image positioned at the bottom of the link.

2. How to restrict length of hover to text?
   Add your padding to the margin property instead and do away with the padding. This means the background image length will match the text length.

3. How to make hover stay visible on active page?
   To make the active page hover remain visible, you can give the current active page a class of selected. As shown in the HTML at the bottom of the answer.

CSS:

#menu {
    float: right;
    height: 30px;
    margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    /* Remove your padding here. Has been adjusted in the margin */
    padding-bottom: 12px; /* Adjust to change the hover spacing */
    text-decoration: none;
}

#menu a:hover, #menu a.selected {
    background: url(images/hover.png) repeat-x 0 bottom;
}

HTML (Example usage of the class selected):

<div id="menu">
    <a href="l1.html">Link 1</a>
    <a href="l2.html" class="selected">Link 2</a>
    <a href="l3.html">Link 3</a>
</div>

How to keep div width after hover?

Currently, the menu's width is decided by the widest element.

"Saudization and Training" is currently the widest element, and as such, when it is in bold type the extra width is accommodated by extending the menu's width. This is because bold text is wider than standard text.

Is there a reason why you can't fix the width of your menu?

If you can't fix the width of the menu - you might choose a different way of highlighting the selected element on hover (underline, being a common choice).

See related discussion here:

Inline elements shifting when made bold on hover

How to avoid div width increase on hover

Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)

Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product It's a product, yes.</a></li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>

And in the CSS I added this to the end:

.tree li.pad {
    line-height: 0;
    font-weight: bold;
    visibility: hidden;
}

What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.

However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).

---

Related Topics