Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/

The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expands by 20px on hover.

The Issue at Hand: Due to the flexibility of both components, there are instances where the button/link with the arrow may initially fit on the same line as the main text, but when hovered over, it extends into the padding causing an unwanted pop-down effect. This creates a poor user experience. While I can address situations where the width is already too wide, I struggle with scenarios where it doesn't fit only on hover.

Seeking a Solution: Is there a method to effectively "pad" the button? In other words, can I automatically adjust its width (which varies) + an additional 20px so that if it becomes too wide upon hovering, it will preemptively move to a new line?

I have experimented with calc(), but it doesn't seem like the right approach. Using white-space: no-wrap or overflows result in unforeseen consequences. Although a JavaScript solution seems straightforward (detect width, add 20px), I am aiming to steer clear of this dependency.

Plan B: If all else fails, I might resort to using JS or simply force the button onto a second line.

Thank you for any guidance!

css

Answer №1

Include a margin-right in the default state, remove it on hover:

html,
body {
  width: 100%;
  height: 100%;
}

.promo {
  background: #a30b35;
  border: 0;
  color: #fff;
  cursor: pointer;
  font: 20px "DINPro", sans-serif;
  padding: 40px;
  text-transform: uppercase;
  transition: all .2s;
  width: 485px;
}

.promo-text {
  display:inline;
}

.button {
  color: #000;
  line-height: .9;
  display: inline-flex;
}

.button-text {
  float: left;
}

.arrow {
  float: left;
  width: 70px;
  margin: 8px 0 0 10px;
  margin-right: 20px; /* added */
  height: 2px;
  background: #000;
  transition: all 200ms ease-in-out;
}

.arrow svg {
  margin: -5px -1px 0 0px;
  float: right;
  fill: #000;
  transition: all 200ms ease-in-out
}

.button:hover .arrow {
  width: 90px;
  margin-right: 0px; /* added */
}

.button:hover .arrow svg {}
<div class="promo">

  <div class="promo-text">
  The 2017 Jimmy Aard lle ipaei acndamy, ace Jace ace une 26.</div>
  
  <div class="button">  
    <div class="defense">
      <div class="button-text">
        Rea fgdd fgdmmmore asasas asa 
      </div>
      <div class="arrow">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="12px" viewBox="0 0 7.1 11.4" style="enable-background:new 0 0 7.1 11.4;" xml:space="preserve">
          <polygon class="st0" points="1.4,11.4 0,10 4.3,5.7 0,1.4 1.4,0 7.1,5.7 " />
        </svg>
      </div>
    </div>    
  </div>
  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking for empty inputs using Html, JavaScript, and CSS

I need help with a form that has 6 input fields. I want to ensure all fields are filled out, and if not, display an alert message. Any suggestions on how to achieve this? Additionally, I'm experiencing difficulties implementing different font styles. ...

javascriptjqueryhtmlcssinput

Styling a HTML div element with a header and footer, while also ensuring that the

My goal is to create a div that features a header with a unique background design. The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different? I also want a footer with its own distinctive ...

jquerycsshtml

Box-sizing:border-box causing CSS padding problem in Firefox

Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...

cssfirefoxpaddingborder-box

Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png I'm struggling to add a logo to the right corner of this div The logo size is too big and it doesn't adjust properly to the existing div height and width Below is the code I've tried, but the image is ruini ...

htmlcss

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

htmlcssmobilesassresponsive

Issue with resizing keyboard/dropdown popup in Android hybrid app when navigating offscreen

Here is the offscreen navigation menu I have set up. When I open a keyboard or dropdown, the offscreen menu changes and exhibits a small gap on the left side after the popup (highlighted in red). It seems like the menu is shifting further away from the ed ...

androidcsscordova

Need to update various form fields at once with jquery?

There is a form with fields for firstname, lastname, email, country, along with edit icon and submit/cancel buttons. When the user clicks on the edit icon in the top right corner, all values will be displayed in textboxes and the country will be shown in ...

javascriptjqueryhtmlcss

Is it recommended to place JavaScript/CSS at the bottom of an HTML document?

I am currently utilizing jQuery Mobile, and at the moment, my <head> section looks like this: <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>help</title> <link ...

javascriptjqueryhtmlcssjquery-mobile

Stylish CSS: Jagged 3-dimensional rotated text

Have a look at this Codepen to see the issue. As the text moves into the background, more aliasing appears. A screenshot taken in Chrome on macOS (similar appearance in FF & Safari): https://i.sstatic.net/n746I.png I've experimented with different ...

htmlcssantialiasing

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

Issues with a responsive website not displaying correctly in the Firefox browser

I have created a carousel that is functioning correctly. However, I am encountering an issue with making it fully responsive. It appears to work properly in webkit browsers, but there are some issues in Firefox. Despite the images resizing properly, the ...

htmlcss

Determine if the html element is wrapping to a new line when zoomed in or when the text size on Windows is increased

My webpage has 2 labels displayed side by side, but due to the system text size being set at 150% (which is recommended) in Windows, the second label does not have enough space and gets pushed below the first label. I am looking for a way to determine if t ...

javascripthtmlcsswindowsbootstrap-5

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery? SAMPLE 1 ConfigTechnologyHormonyAppComponentBackOfficeLaunch It needs to be broken into ConfigTechnologyHo rmonyAppComponentB ackOfficeLaunch SAMPLE 2 WorkAppComponentBa ...

jqueryhtmlcssword-break

What is the best way to shift the lower section to align with the right side of the rest of the headers and text blocks?

Help needed with moving the Uni section to align it beside other paragraphs and headers. Tried using float left but no luck so far. Any suggestions would be appreciated! Check out the code here <div class ="container"> <div id="education" class ...

htmlcsscss-float

Aligning a div with absolute positioning vertically

There are two elements positioned side by side: an input field and a div. The div is absolutely positioned inside a relative element and placed to the right of the input. The input field has a fixed height, while the height of the div depends on its conte ...

javascriptcss

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

iphonehtmlcsspositioningz-index

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

Choose the element before and add a style effect with CSS

I'm trying to create a layout with 3 <div> elements in one horizontal line, each with a width of 33.33%. When hovering over one div, I want its width to expand to 50% while the other two shrink to 25%. <div id="A"></div> <div id= ...

javascriptjqueryhtmlcss

Arranging two stretchable div elements side by side

I'm currently working on a web page layout where I want two divs to be flexible and adjust their size as the browser window is resized. However, I've encountered an issue where instead of shrinking, the line breaks between the two divs when the w ...

htmlcss