在 CSS 中使用伪元素将内容推送到元素的左侧、右侧、顶部或底部

Question

有没有办法使用伪元素将元素的内容向右推，得到下图中的结果？

现在，这是 html 代码：

<div class="center" style="background-color: cyan;">
    <div class="outside-right">
        Content
    </div>
</div>

这些是 CSS 类：

.center {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.outside-right{
    transform: translateX(100%);
}

问题在于 CSS 动画在更改元素的 transform 属性时，它会覆盖类 .outside-right transform 并且元素会在开始动画之前快速回到其父级的中心。

所以我尝试更改.outside-right 类，将::before 伪元素与width:100% 放在一起，以便推送该元素的内容。但似乎没有什么可以让它发挥作用。 我试过了：

CSS：

.outside-right-using-pseudo-element::before {
    content: '';
    display: inline-block;
    background-color: red;
    width: 100%;
}

还有

.outside-right-using-pseudo-element::before {
    content: '';
    float: left;
    background-color: red;
    width: 100%;
}

HTML

<div class="center" style="background-color: cyan;">
    <div class="outside-right-using-pseudo-element">
        Content
    </div>
</div>

有什么方法可以让它工作吗？

Answer 1

你差不多好了，添加white-space:nowrap;以避免在下一行出现元素：

.outside-right-using-pseudo-element {
  white-space: nowrap;
}

.outside-right-using-pseudo-element::before {
  content: '';
  display: inline-block;
  background-color: red;
  width: 100%;
  transition: 1s;
}

.outside-right-using-pseudo-element:hover::before {
  width: 0%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="center" style="background-color: cyan;">
  <div class="outside-right-using-pseudo-element">
    Content
  </div>
</div>

另一个使用 flexbox 的想法：

.outside-right-using-pseudo-element {
  display: flex;
  white-space:nowrap;
}

.outside-right-using-pseudo-element::before {
  content: '';
  background-color: red;
  width: 100%;
  flex-shrink: 0; /* this will do the trick */
  align-self: flex-start;
  transition: 1s;
}

.outside-right-using-pseudo-element:hover::before {
  width: 0%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="center" style="background-color: cyan;">
  <div class="outside-right-using-pseudo-element">
    Content
  </div>
</div>

你可以很容易地找到另一个方向：

.outside-right-using-pseudo-element,
.outside-left-using-pseudo-element{
  display: flex;
  white-space:nowrap;
}

.outside-left-using-pseudo-element,
.outside-bottom-using-pseudo-element{
  justify-content:flex-end;
}

.outside-right-using-pseudo-element::before,
.outside-left-using-pseudo-element::after{
  content: '';
  background-color: red;
  width: 100%;
  flex-shrink: 0; /* this will do the trick */
  align-self: flex-start;
  transition: 1s;
}

.outside-right-using-pseudo-element:hover::before,
.outside-left-using-pseudo-element:hover::after {
  width: 0%;
}

.center {
  display:table;
  margin:80px auto;
}

<div class="center" style="background-color: cyan;">
  <div class="outside-left-using-pseudo-element">
    Content
  </div>
</div>
<div class="center" style="background-color: cyan;">
  <div class="outside-right-using-pseudo-element">
    Content content
  </div>
</div>

Answer 2

        .outside-right-using-pseudo-element {
          position:relative;
          padding-left:110px
          
        }
        .outside-right-using-pseudo-element:before{
            content: '';
            position: absolute;
            width: 100px;
            left: 0;
            height: 100%;
            background: cyan;
          
        } 

 
    <div class="center">
        <div class="outside-right-using-pseudo-element">
            Content
        </div>
    </div>