Question

目标：在第一个列表项之后的每个列表项之前插入“ /”。 当前结果：“ /”不可见/不显示/不显示。

我在下面附加了我的CSS和HTML代码

.breadcrumbs  {
  object-fit: contain;
  padding-left: 0.3em;

}

.breadcrumbs li {
  display: inline;
  padding-right: 0.3em;

}

.breadcrumbs li+li::before {
  content: "/\00a0";
}

.breadcrumbs li a {
  color: var(--nav_color);
  text-decoration: none;
  font-size: large;
}

.breadcrumbs li a:active {
  text-decoration: underline;
  color: powderblue;

<ul class="breadcrumbs">
      <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\home_landing.html">Home</a></li>
      <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\products.html">Products</a></li>
      <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\contact_us.html">Contact Us</a></li>
      <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\reviews.html">Reviews</a></li>
</ul>

Answer 1

我将正斜杠写为'/'。

将框的宽度设置为空格的大小，使文本居中对齐。

{
    content: '/';
    width: 20px;
    text-align: center;
}

编辑：我怎么写的……

	.breadcrumbs  {
		object-fit: contain;
		padding: 10px;
	}

	.breadcrumbs li {
		display: block;
		padding: 0;
		float: left;
    /* if you remove the line breaks in the html between your li's you can use display: inline-block; and remove the float left */
	}

	.breadcrumbs li+li:before {
		content: '/';
		width: 20px;
		text-align: center;
		display: inline-block;
	}

	.breadcrumbs li a {
		text-decoration: none;
	}

	.breadcrumbs li a:active {
		text-decoration: underline;
		color: powderblue;
	}

<ul class="breadcrumbs">
	<li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\home_landing.html">Home</a></li>
	<li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\products.html">Products</a></li>
	<li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\contact_us.html">Contact Us</a></li>
	<li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\reviews.html">Reviews</a></li>
</ul>

Ta，J

CSS :: before伪元素似乎无效。我似乎无法找出原因，也无法在线获得解决方案

1 个答案: