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

Question

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

现在，这是 html 代码：

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

这些是 CSS classes:

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

问题是 CSS 动画在改变元素的变换属性时，它会覆盖 class .outside-right 变换和元素将在开始动画之前回到其父元素的中心。

所以我尝试更改 .outside-right class，方法是将 ::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>

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

Use pseudo elements to push the content to left, right, top, or bottom of the element in CSS

html

css

web-frontend

pseudo-element

css-animations