如何在面包屑中大写文本？

Question

这是包含bootstrap的breadcrumb，

的html

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  text-transform: lowercase;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

<ul class="breadcrumb">
  <li><a href="#">MEP SERVICES </a></li>
  <li><a href="#">Electrical</a></li>
  <li><a href="#">Lighting</a></li>
  <li>HT &amp; LT</li>
</ul>

现在它的外观和感觉是，

我想要以下的外观和感觉。

我在css下方尝试过，但没有工作。

.breadcrumb>li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
}

Answer 1

在@internal

中使用text-transform: capitalize;

a

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

.breadcrumb>li>a {
  text-transform: capitalize;
}

如果你真的想让<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <ul class="breadcrumb"> <li><a href="#">mep services</a></li> <li><a href="#">electrical</a></li> <li><a href="#">lighting</a></li> <li>HT &amp; LT</li> </ul>在html中完全大写，那么你需要更多的代码：

MEP SERVICES

.breadcrumb {
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 15px 0 35px;
}

.breadcrumb>li {
  display: inline-block;
  font-size: 11px;
}

.breadcrumb>li+li:before {
  content: "\3E";
  color: #b1afaf;
  font-weight: bold;
}

.breadcrumb>li>a {
  text-transform: capitalize;
}

.breadcrumb>li:first-of-type>a {
  text-transform: lowercase;
}

.breadcrumb>li:first-of-type>a:first-letter {
  text-transform: capitalize;
}
 /* for ::first-letter work `a` needs to be block level element */
.breadcrumb>li>a {
  display: inline-block;
}