<div id="symbols">
  <span class="os os-ne">&ne;</span>
  <span class="os os-gt">&gt;</span>
  <span class="os os-lt">&lt;</span>
  <span class="os os-ngt">&ngt;</span>
  <span class="os os-nlt">&nless;</span>
  <span class="os os-npar">&NotDoubleVerticalBar;</span>
</div>
#symbols { letter-spacing: 0.5em; padding: 30px; text-align: center;}

.os {
  display: inline-block;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin: 0 0.1em 0.1em;
  vertical-align: middle;
}

/* less than, greater than, not less than, not greater than */
.os-gt, .os-lt, .os-ngt, .os-nlt {
    border: 3px solid #000;
    color: transparent;
    height: 0.45em;
    line-height: 0;
    margin-bottom: 0;
    position: relative;
    vertical-align: 0.15em;
    width: 0.5em;
}

.os-gt, .os-ngt { border-right: 0; }
.os-lt, .os-nlt { border-left: 0; }
.os-ngt:after { left: 33%; }

.os-ngt:after, .os-nlt:after {
  border-right: 3px solid #000;
  content: " ";
  height: 1.1em;
  position: absolute;
  top: -0.3em;
}

.os-nlt:after { left: 46%; }

/* Not equal */
.os-ne {
    border: 3px solid #000;
    border-width: 3px 0;
    color: transparent;
    height: 0.1em;
    line-height: 0;
    margin-bottom: 0;
    position: relative;
    width: 0.7em;
}

.os-ne:after {
  border-right: 3px solid #000;
  content: " ";
  height: 0.7em;
  left: 40%;
  position: absolute;
  top: -0.25em;
}

/* Parallel */
.os-npar {
    border: 3px solid #000;
    border-width: 0 3px;
    color: transparent;
    height: 0.8em;
    line-height: 0;
    margin-bottom: 0;
    position: relative;
    width: 0.1em;
}

.os-npar:after {
  border-bottom: 3px solid #000;
  content: " ";
  width: 0.8em;
  left: -0.35em;
  position: absolute;
  top: 0.3em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.