Add a character on top of a span

Question

I have a span next to my h4 look like this.

I want to stack a white right angle bracket on top of my span.

HTML

<h4 class="pp">
  <span class="cr"></span>
  Laptop
</h4>

CSS

.cr {
    position: relative;
    display: inline-block;
    background-color: #ff7c00;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

---

I tried

 <h4 class="pp">
    <span class="cr"></span>
    <span>></span>
    Laptop
 </h4>

I got

How would one go about do this?

Answer 1

Dont use < or > signs in your text, the browser might mix them with tags...

Solution1: Using HTML Entities

Stack Snippet

.cr {
  position: relative;
  display: inline-block;
  background-color: #ff7c00;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
  text-align: center;
  color: #fff;
}

<h4 class="pp">
  <span class="cr">&gt;</span> Laptop
</h4>

Solution2: Use :before pseudo css to the .cr class

Stack Snippet

.cr {
  position: relative;
  display: inline-block;
  background-color: #ff7c00;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.cr:before {
  content: ">";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ffffff;
  transform: translate(-50%, -50%);
}

<h4 class="pp">
  <span class="cr"></span> Laptop
</h4>

Answer 2

Is this what you were looking for? Its technically inside the box rather than on top, but I think that's what you wanted to achieve, no?

.cr {
    position: relative;
    display: inline-block;
    background-color: #ff7c00;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
    text-align: center;
    color: white;
}

 <h4 class="pp">
      <span class="cr"> > </span>
      Laptop
  </h4>