html - 如何在跨度之前放置一个CSS三 Angular 形

Question

我试图在我的 span 之前放置一个 css 三 Angular 形，但由于某种原因什么都没有显示，知道哪里出了问题吗？

.triangle:before {
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-right: 6px solid green;
  border-bottom: 3px solid transparent;
  right: 100%;
  top: 0%;
  position: absolute;
  clear: both;
}

.triangle {
  position: relative;
}

<span class="triangle">Hi</span>

Answer 1

你忘了

content : '';

在你的 CSS 中

.triangle::before{
    content:'';
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-right: 6px solid green;
    border-bottom: 3px solid transparent;
    right:100%;
    top:0%;
    position: absolute;
    clear: both;
}