Question

我想在我的跨度之前设置一个css三角形，并且出于某种原因根本没有任何东西出现，任何想法是什么问题？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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;
}

Answer 2

您的跨度需要使用class而不是className，您需要在{c}之前添加content:''：

.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;
}
.triangle{
    position: relative;
}

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

Answer 3

您忘记在自己的css中传递content:''，请查看以下更新的代码段：

＆＃13;

.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:7px;
    position: absolute;
}
.triangle{
    position: relative;
    display: inline-block;
}

＆＃13;

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

＆＃13;

如何在跨度

3 个答案: