[分享]css中怎么画小于号

在CSS中，我们可以使用伪元素::before或::after来画出小于号。为了实现这个效果，我们需要使用CSS中的border属性和transform属性。/ 使用伪元素::before画小于号 /...

在CSS中，我们可以使用伪元素::before或::after来画出小于号。为了实现这个效果，我们需要使用CSS中的border属性和transform属性。

/* 使用伪元素::before画小于号 */
.less-than::before {
  content: ';
  display: inline-block; /* 将伪元素设为块级元素 */
  border-top: 5px solid black;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: translateY(-2px) rotate(45deg); /* 向上移动2像素并旋转45度 */
}

/* 使用伪元素::after画小于号 */
.less-than::after {
  content: ';
  display: inline-block; /* 将伪元素设为块级元素 */
  border-top: 5px solid transparent;
  border-right: 5px solid black;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  transform: translateY(-2px) rotate(-45deg); /* 向上移动2像素并旋转-45度 */
} 

我们可以在需要使用小于号的地方加上<span class="less-than">，例如：

<p>HTML是一种<span class="less-than"></span>CSS是一种语言<p> 

运行后的效果如下：