代码没几行,直接先上图。
代码如下图:
效果如下图:
当然,如果觉得效果过于单薄的话,可以在li标签里增加a标签什么的,然后给a标签样式,hover样式等等。
但显然关键点就是图中部分了。
为了可以直接复制粘贴,代码放一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
ul > li{
display: inline-block;
}
ul > li + li::before{
content: ">";
}
</style>
<body>
<ul>
<li>中国大陆</li>
<li>广东</li>
<li>深圳</li>
<li>龙华区</li>
</ul>
</body>
</html>
为什么会是这个样子呢?分析一下。
两个关键点,一个是伪类/伪元素的应用,一个是content的用法,当然还可以说有+选择器的用法。
css + 选择器
http://www.w3school.com.cn/cssref/css_selectors.asp
伪类/伪元素以及content属性
伪元素,就是“虚拟”出一个元素来,并可指定样式、content内容等。
ps:content也不见得只能是普通字符串,比如你需要一个图片做伪元素,可以指定为url(xxx.jpg),如下:
.content-footer-left > a:before {
content: url("images/lt_hf.png");
display: inline-block;
position: relative;
top: 4px;
margin-right: 10px;
}
适合模拟这样的,如下图(图中那个小图标,用伪元素就在合适不过了,而且content可直接指定img的url):
完毕,我觉得很风骚了。
补充一下一个content取值的用法。
<style>
a:after
{content: " (" attr(href) ")"
}
</style>
<body>
<a href="http://www.sina.com.cn">Sina</a>
</body>
效果就是取了此元素的attr属性,作为伪元素的content显示,一试便知。
扩展阅读:
https://www.cnblogs.com/liangxiblog/p/5981180.html
https://www.cnblogs.com/mycoke/p/6056187.html