时间戳

首页 > 解决方案 > CSS 内容之前在“BOX”之外

css - CSS 内容之前在“BOX”之外

问题描述

有些东西我不明白。

当我创建一个例子时

<style>
.vorher{
  text-align: center;
   border: 1px solid red;
   max-width: 100px;
   margin-left: auto;
   margin-right: auto;
}
.vorher:before{
  content: "\2192";
}
</style>

<div class="row">

<div class="half">
  <p id="button1" class="vorher"><a href="#">Some Text</a>
  </p>
</div>
<div class="half">
<p id="button2" class="vorher"><a href="#">Some Text</a>
  </p>
</div>
</div>


.row {
  width: 100%;
  display: flex;
}

.half {
  width: 50%;
  border: 1px solid green;
}

.vorher {
  text-align: center;
  border: 1px solid red;
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.vorher:before {
  content: "\2192";
}
<div class="row">

  <div class="half">
    <p id="button1" class="vorher"><a href="#">Some Text</a>
    </p>
  </div>
  <div class="half">
    <p id="button2" class="vorher"><a href="#">Some Text</a>
    </p>
  </div>
</div>

我想将左侧的箭头移出框。有点像这样：左边的箭头

但箭头总是在盒子里。如何移动盒子的箭头，让他粘在红色盒子的左边框上？

我知道这是一个非常基本的问题，但我无法让它工作

标签： css

解决方案

您可以使用transform: translate绝对定位：

.row {
  position: relative;
  width: 100%;
  display: flex;
}

.half {
  position: relative;
  width: 50%;
  border: 1px solid green;
}

.vorher {
  position: relative;
  text-align: center;
  border: 1px solid red;
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.vorher:before {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  content: "\2192";
}
<div class="row">

  <div class="half">
    <p id="button1" class="vorher"><a href="#">Some Text</a>
    </p>
  </div>
  <div class="half">
    <p id="button2" class="vorher"><a href="#">Some Text</a>
    </p>
  </div>
</div>

推荐阅读