如何大写breadcrumbs中的文本？

Question

下面是包含引导程序的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

在a中使用text-transform: capitalize;

​

.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>

​

如果你真的想让MEP SERVICES在html中完全大写，那么你需要更多的代码来实现：

​

.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;
}

<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>

​