Question

我正在寻找自定义插入符号，我在此地址中找到了它：

    .caret {
  position: relative;
}

.caret:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #090909;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.caret:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  border-top: 0px solid #eeeeee;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
}

我的疑问是，如何在下面的代码中将这个插入符号放在“健康”一词旁边：

<li class="health"><a href="health/health.php" >health</a></li>

Answer 1

1-你可以使用fontawesome，只需你把代码放在这个

 <li><a kref="#"><i class="fa fa-caret-down></i> link</a></li>

2-如果你想只使用css，

此代码适用于您

＆＃13;

ul{
  list-style-type: none;
}
ul li a{
  text-decoration:none;
  color: #00f;
}

ul li.caret-down a{
 color: #f60;
}

ul li.caret-down a::before{
  display: inline-block;
  position: absolute;
  z-index: 99;
  width: 0;
  height: 0;
  margin-left: -15px;
  margin-top: 6px;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #f60;
  content: '';
}

＆＃13;

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="caret-down"><a href="#">Link 3 - with caret</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

＆＃13;

3 - 如果你想要一张照片

＆＃13;

ul{
  list-style-type: none;
}
ul li a{
  text-decoration:none;
  color: #00f;
}

ul li.picture a{
 color: #f60;
}

ul li.picture a::before{
  display: inline-block;
  position: absolute;
  z-index: 99;
  width: 12px;
  height: 12px;
  margin-left: -15px;
  margin-top: 3px;
  background-image: url('https://placehold.it/12x12/ff6600/ffffff/?text=x'); /*replace it by your picture*/
  background-size: cover;
  content:'';
}

＆＃13;

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="picture"><a href="#">Link 3 - with picture</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

＆＃13;

Answer 2

首先，您需要在要显示插入符号的任何位置包含.caret元素。然后，您需要根据需要调整其与其他元素的定位。下面是一个示例，但您可以通过修改css规则以任何方式使用它：

＆＃13;

.caret {
  position: relative;
}

.caret:before {
  content: '';
  position: absolute;
  top: 3px;
  left: -25px;
  border-top: 10px solid #090909;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.caret:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  border-top: 0px solid #eeeeee;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
}

ul
{
  list-style: none;
}

＆＃13;

<ul>
  <li class="health">
    <i class="caret"></i>
     <a href="health/health.php" >health</a>
  </li>
</ul>

＆＃13;

将此自定义插入符号放在正确的位置

2 个答案: