是否可以使用：在选择器之前使用这样的东西？

Question

我需要做这样的事情。 它看不太多，带箭头的盒子不是按钮的一部分。它在它的前面。是否可以使用：在选择器之前执行此操作？按钮是经典的导航列表。感谢您的帮助

Answer 1

肯定是可能的。您也可以使用图片而不是附加“＆gt;”

ul {
    list-style: none;
}

li { background: gold;
    width: 150px;
    height: 30px;
    line-height: 30px;
    color: white;
}

li:before {
    content: ">";
    border-right: 1px solid white;
    padding: 5px 10px 5px 10px;
    margin-right: 10px;
}

<ul>
    <li>Some text</li>
</ul>

Answer 2

是的，你可以。使：before元素成为相对定位的主按钮内的绝对定位块。

然后，只需给它适当的高度，背景颜色和边框。您可以使用FontAwesome和content属性将其设置为显示箭头。

Answer 3

＆＃13;

＆＃13;

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{padding: 20px;}

div{
    margin-left: 64px;
    position: relative;
    background: orange;
    height: 64px;
    color: white;
    line-height: 64px;
    text-indent: 20px;
    font-size: 20px;
    font-weight: bolder
}

div:before{
    content:'';
    position: absolute;
    left: -134px;
    top: 0;
    margin-left: 64px;
    height:  64px;
    width: 64px;
    background: orange
}
div:after{
    content: '';
    position: absolute;
    left: -90px;
    top: 16px;
    margin-left: 32px;
    height: 20px;
    width: 20px;
    border-top: 8px solid white;
    border-right: 8px solid white;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

＆＃13;

<div>Some Text </div>

＆＃13;

＆＃13;

＆＃13;