Question

是否可以在不使用列表的情况下在html链接之前放置插入符号？我确实有一个列表的工作代码，但当然它不适用于单个链接：

.list-caret {
  margin: 0.75em 0;
  margin-left: 30px;
  list-style: none;
  padding: 0;
}

.list-caret li:before {
  content: "";
  border-color: transparent #ec6608;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -0.8em;
  top: 1.1em;
  color: #ec6608;
  position: relative;
}

Answer 1

这可以胜任：

a {
  padding-left: 20px;
  display: inline-block;
}

a:before {
  content: "";
  border-color: transparent #ec6608;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -10px;
  top: 1.1em;
  color: #ec6608;
  position: relative;
}

<a href="#">This is a link with a caret before on it</a>

Answer 2

将:before与锚标记一起使用，并添加display: inline-block;以锚定

＆＃13;

.list-caret {
  margin: 0.75em 0;
  margin-left: 30px;
  list-style: none;
  padding: 0;
}

.list-caret li a {
  display: inline-block;
}

.list-caret li a:before {
  content: " ";
  border-color: transparent #ec6608;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -0.8em;
  top: 1.1em;
  color: #ec6608;
  position: relative;
}

＆＃13;

<ul class="list-caret">
  <li><a href="javascript:;">link 1</a></li>
  <li><a href="javascript:;">link 2</a></li>
  <li><a href="javascript:;">link 3</a></li>
  <li><a href="javascript:;">link 4</a></li>
  <li><a href="javascript:;">link 5</a></li>
</ul>

＆＃13;

链接前的插入

2 个答案: