CODEWITHSUNDEEP
csspseudo-element
Oliver Brodersen
Oliver Brodersen

Reputation: 79

Using pseudo elements to position text

So this is what i want to achive:

enter image description here

But i need help with the positioning. I want the "honey money" part to be written and positioned using css pseudo elements. I read that this should work content: "honey \A money" should work not it does nothing.

So just to clarify, what i want is a way to achive this positioning using ::before and/or ::after tags. thank you!

Upvotes: 1

Views: 49

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can do this with pseudo-element but you also need to add white-space: pre;.

.text {
  position: relative;
  display: inline-block;
  font-size: 100px;
  line-height: 0.8;
}
.text:after {
  content: 'HONEY \A MONEY';
  white-space: pre;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 40px;
  line-height: 1;
  transform: translateX(100%);
}
<div class="text">O</div>

Upvotes: 3

Related Questions