How to create text effect like this (HTML/ CSS)? Text with caret

Question

Not sure how to do this with just HTML/CSS. Should I use an image for the caret and top wording and insert it that way?

What have you done so far to figure out a solution? What does your HTML look like? Are there any restrictions or something to be aware of? — rawnewdlz, Feb 16 '22 at 21:45

score 0 · Answer 1 · answered Feb 16 '22 at 17:34

0

span::before {
  content: "∨";
  position: absolute;
  left: 1em;
  top: 1.2em;
}

<span>text</span>

You may have to edit the positioning to get it in the right spot, but the key here is using a before pseudo-element with content: "∨".

answered Feb 16 '22 at 17:34

Connor Mooneyhan

547
6
17

score 0 · Answer 2 · answered Feb 16 '22 at 17:41

Can you try something like this, for pure CSS?

<div class='parent'>
    <div class='caret'>v</div>
    <div class='added-text'>a lot of</div>
    <div class='main-text'>Save  time with a quick solution</div>
</div>

.parent {
    position: absolute;
}

.added-text {
    padding-left: 10px;
}

.main-text {
}

.caret {
    position: absolute;
    top: 15px;  <-- might need some custom tuning
    left: 24px; <-- might need some custom tuning
}

score 0 · Answer 3 · edited Feb 16 '22 at 22:31

Without sharing any details or what you have done so far, it leaves infinite options. Here's one.

p {
  font-family: Arial, sans-serif;
  font-size: 36px;
  margin-top: 50px;
  position: relative;
}

span {
  position: absolute;
  left: 15px;
  top: -60px;
}

span::before {
  content: "\2228";
  color: #00f;
  font-size: 50px;
  left: 62px;
  position: relative;
  top: 32px;
}

<p>Save <span>a lot of </span> &nbsp;time with a quick solution</p>

How to create text effect like this (HTML/ CSS)? Text with caret

3 Answers3