有没有办法让父div用CSS中子内容的大小进行调整？

Question

是否可以获取下面的代码来将动画大小调整为任意长度的正文？

你好，

我不是前端开发人员，所以想知道是否有人可以向我指出如何调整容器div块的大小以适应任何长度的字符串，而不是“了解更多信息”。理想情况下，是否可以在纯CSS中实现此功能？还是我必须让JavaScript参与其中？

我遇到的问题是，我正在尝试让父母将其动画化为孩子的宽度，而不是让孩子将其动画化为父母的宽度。

我曾经尝试使用inline-flex，但是我使用错了或者这不是解决问题的方法。任何帮助将不胜感激。

先谢谢了。

@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>

Answer 1

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>