使用伪元素将内容推入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转换，并且在开始动画之前，元素将捕捉回到其父对象的中心。

因此，我尝试通过将.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 {
  display: table;
  margin: 50px auto;
}

<div class="center" style="background-color: cyan;">
  <div class="outside-right-using-pseudo-element">
    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>