纯粹在 CSS 中创建线面包屑 [英] creating a line breadcrumb purely in CSS

问题描述

我想知道是否有办法创建这种面包屑样式:http://www.lumosity.com/app/v5/personalization/memory

I was wondering if there was a way to create this style of breadcrumb: http://www.lumosity.com/app/v5/personalization/memory

只有 CSS.我在网上寻找任何文章，但我找到的所有文章都是关于三角形面包屑的.如果你们知道任何文章，请分享.

with only CSS. I've looked online for any articles but all the ones I found were for triangle breadcrumbs. If you guys know any articles please share.

我找到了一个 stackoverflow，如果其他人正在寻找它，它就有答案.创建由线连接的 CSS3 圆圈

I found a stackoverflow that had the answer if anyone else was looking for it. Creating CSS3 Circles connected by lines

我只需要稍微改变一下我正在搜索的词

I just had to change the words i was searching a bit

推荐答案

这个呢?http://jsfiddle.net/8u2Bp/9/

纯粹是 css，因此没有实际更改 div 或页面或其他任何代码.

Is purely css, so no code for actually changing div or page or whatever.

为了这个效果，你必须使用 li:before 和 li:after 标签，我使用了 css counter步骤也是如此.

For this effect, you have to play with the li:before and the li:after tags, and I used the css counter for the steps as well.

有关 hte css counter 的更多信息，请查看此链接:

For more info about hte css counter, check this link:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

希望有帮助.

这篇关于纯粹在 CSS 中创建线面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！