Is there a way to get a parent div to resize with its child's contents in CSS?

Question

Is it possible to get the code below to resize the animation to any length of body text?

Hi there,

I'm not a frontend developer and wondered if anybody might be able to help me by pointing me in the direction of how to resize the container div block to accommodate any length of string in the place of "Learn More". Ideally, is it possible to implement this in pure CSS or do I have to get javascript involved?

The problem I have is that I'm trying to get the parent to animate to the width of the child, not the child to animate to the width of the parent.

I've had a go at using inline-flex but either I'm using it wrong or it is not the solution to the problem. Any help would be much appreciated.

Thanks in advance.

@import url("https://fonts.googleapis.com/css?family=Mukta:700");


body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #f3f8fa;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.learn-more {
  width: 12rem;
  height: auto;
}
.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 4rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.learn-more:hover .circle {
  width: 100%;
}
.learn-more:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
  color: #fff;
}

<div id="container">
  <div class="learn-more">
    <div class="circle">
      <span class="icon arrow"></span>
      <p class="button-text">Learn More</p>
    </div>
  </div>
</div>

Possible duplicate of [Animate a object across the width of its parent using css transforms](https://stackoverflow.com/questions/27482058/animate-a-object-across-the-width-of-its-parent-using-css-transforms) — knurzl, Apr 04 '19 at 10:39
The problem I have is that I'm trying to get the parent to animate to the width of the child, not the child to animate to the width of the parent. — Jamie, Apr 04 '19 at 10:44
Terrible code to create a button in the first place, this should be using either `button` (for an actual click button that is supposed to trigger some action), or an `a` if this is simply supposed to link somewhere else. // I don’t see why this would need animation of the width of any parent, if build properly. The text content can be used to span up the element to the necessary width (plus some padding-left to keep space for the circle), [...] — 04FS, Apr 04 '19 at 11:09
[...] the circle can be absolutely positioned - `left:0; right: calc(100% - 3rem)`. If the width is removed/set to auto, this makes it 3rem wide to begin with - and then you simply transition that to `right: 0` on hover … — 04FS, Apr 04 '19 at 11:10

score 1 · Accepted Answer · answered Apr 04 '19 at 11:17

You can do it with ::before and content: " ", check it out below.

This will make it work but beware you'll have to clean the code because there are things that don't make sense there.

@import url("https://fonts.googleapis.com/css?family=Mukta:700");

body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #f3f8fa;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.learn-more {
  width: 100%;
}
.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  margin: 0;
  padding: 0 1rem 0 0;
  width: 3rem;
  width: 100%;
  height: 3rem;
  /*background: #282936;*/
  display: inline-block;
}
.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 4rem;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.learn-more .circle::before {
  transition: 300ms;
  height: 5px;
  width: 3rem;
  height: 100%;
  border-radius: 1.625rem;
  content: "";
  position: absolute;
  background-color: #031D44;
}

.learn-more:hover .circle::before {
  width: 100%;
}
.learn-more:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
  color: #fff;
}

<div id="container">
  <div class="learn-more">
    <div class="circle">
      <span class="icon arrow"></span>
      <p class="button-text">Learn Moreeeeeee</p>
    </div>
  </div>
</div>

Thank you so much, I'm aware that the code is a bit odd. I found it on codepen and was trying to clean it up a bit. — Jamie, Apr 04 '19 at 11:34

Is there a way to get a parent div to resize with its child's contents in CSS?

Is it possible to get the code below to resize the animation to any length of body text?

1 Answers1