Question

我制造了一个arrow子,我想附在一份清单,而不是一个圆点。我曾尝试过使用:后来,但已经成功,我不得不承认,我是新鲜的。

这里我迄今所谈到的:

#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}



ul li {
	padding-bottom: 10px;
}

ul li:before{
   border-right:5px solid black;
   border-bottom:5px solid black;
   width:10px;
   height:10px;
   transform: rotate(-45deg);
   margin-top:40px;
}

<!-- Arrow below -->
<div id="arrow"></div>


<!-- Want to place arrow where bullet points are  -->
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>

谁会有任何想法?

Answer 1

使用<代码>content: with pseudo elements (: before or :< subsequently/code>。并使用<条码>清单式:<条码/代码>以删除子弹。和:



ul {
  list-style: none;
}

ul li:before{
   content:   ;
   position: absolute;
   border-right:2px solid black;
   border-bottom:2px solid black;
   width:10px;
   height:10px;
   top: calc(50% - 4px);
   left: -20px;
   transform: translateY(-50%) rotate(-45deg);
}


1. 审视以下几页:



#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}



ul li {
  position: relative;
	padding-bottom: 10px;
}

ul {
  list-style: none;
}

ul li:before{
   content:   ;
   position: absolute;
   border-right:2px solid black;
   border-bottom:2px solid black;
   width:10px;
   height:10px;
   top: calc(50% - 4px);
   left: -20px;
   transform: translateY(-50%) rotate(-45deg);
}
<!-- Want to place arrow where bullet points are  -->
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>




希望这一帮助!

Answer 2


不要直接回答提问,但希望某些人从像我这样进行的搜查中找到这个问题。

采用与其他答复大致相同的概念,但采用更简单的<代码>: 伪装,你可以用任何单条码的arrow子,用于你的子弹,而不是用小块的近似:

ul {
  position: relative;
  list-style: none;
}

li::before {
  content:  ▶ ;
  position: absolute;
  left: 0;
}

这里是一条单典arrow,因此你可以找到你喜欢的东西:。

Answer 3

更现代(2021)做法是:

注:中心与肤色是任择的。

ul {
  list-style-type: none
}

li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
  align-items: center;
}

li::before {
  content: ">";
  font-size: 10px;
  color: #999;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Answer 4

仅增加以前的内容,并显示在线24小时

#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}

ul li {
    padding-bottom: 10px;
    list-style:none;
}

ul li:before {
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    content: "";
    display: inline-block;
    margin-right: 5px;
}

Answer 5

这是我很高兴的对贾米·汉弗莱的答复的细微改动。下面的例子与SASS(scs)而不是CSS(CSS)ty。我确实享有这样的事实,即这些子弹与线性项目分开,它们自己是ty的。

<ul class="myclass">
  <li><a href="myhref">Item One</a></li>
  <li><a href="myhref">Item Two</a></li>
  <li><a href="myhref">Item Three</a></li>
</ul

ul.myclass {
    list-style: none;
    margin-left: 30px;

    li::before {
        content:  ▶ ;
        color: #8090c0;
    }

    li {
        margin-bottom: 12px;

        a {
            padding-left: 10px;
            font-size: 1.4em;
            color: #0000e0;
        }
    }
}

Answer 6

Today is the best to use ::marker

友情链接