如何创建这样的文本效果 (HTML/ CSS)？ 带插入符的文本

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?

Answer 1

 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: "∨" .

Answer 2

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
}

Answer 3

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>