CODEWITHSUNDEEP
css
Tom tom
Tom tom

Reputation: 331

CSS Content Before outside the "BOX"

There is something i dont get.

When I create an example like

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

I want to move the arrow on the left side, out of the box. Kind a like this: Arrow on the left

But the arrow is always in the box. how to I move the arrow oit of the box, and make him sticky to the left border of the red box?

I know its a quite basic question, but I cant get it working

Upvotes: 1

Views: 132

Answers (1)

Zze
Zze

Reputation: 18835

You can use transform: translate with absolute positioning:

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

Upvotes: 1

Related Questions