CSS :: before偽元素似乎無效。 我似乎無法找出原因，也無法在線獲得解決方案

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> 

大，