新闻摘要:纯CSS在列表项前面加三角形的问题 在实际网站上的呈现： 纯CSS在列表项前面加三角形的问题 !doctypehtml html lang = en head meta charset = UTF-8 title Document / title style ulli{ list-style:none; } ul#my-id{ margin:0.
纯CSS在列表项前面加三角形的问题
在实际网站上的呈现：
纯CSS在列表项前面加三角形的问题
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style>
-
ul li{
-
list-style:none;
-
}
-
ul#my-id{
-
margin: 0.75em 0;
-
padding: 0 1em;
-
list-style: none;
-
}
-
/* li:before {
-
content: "";
-
border-color: transparent red;
-
border-style: solid;
-
border-width: 0.35em 0 0.35em 0.45em;
-
display: block;
-
height: 0;
-
width: 0;
-
left: -1em;
-
top: 0.9em;
-
position: relative;
-
color:red;
-
} */
-
ul#my-id li:before {
-
display: inline-block;
-
width: 0;
-
height: 0;
-
content: ' ';
-
border-top: solid transparent;
-
border-bottom: solid transparent;
-
border-left: solid #f00;
-
border-width: 5px;
-
margin-right: 5px;
-
}
-
</style>
-
</head>
-
<body>
-
<ul id="my-id">
-
<li>aaa</li>
-
<li>ddd</li>
-
<li>fff</li>
-
<li>ggg</li>
-
<li>hhh</li>
-
</ul>
-
<ul>
-
<li>ddd</li>
-
<li>fff</li>
-
<li>ggg</li>
-
</ul>
-
</body>
-
</html>
亿恩科技手机站
关注亿恩科技微信
