CSS h1第一个字母或第一个孩子的问题

Question

我无法找到解决方案，但我希望<h1>的第一个字母大于其他字母。

这是我的代码：

＆＃13;

＆＃13;

.heading {
  margin-top: 25px;
  width: 100%;
  font-size: 38px;
  font-weight: 600;
}

.heading h1 {
  display: table;
  width: 75%;
  white-space: nowrap;
  margin: 0 auto;
  text-align: center;
  color: #14304f
}

.heading h1:before,
.heading h1:after {
  content: '';
  width: 40%;
  background: url("https://dummyimage.com/10x1/000/000.png") repeat-x center center;
  display: table-cell;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.heading h1:before {
  border-right: 5px solid transparent;
}

.heading h1:after {
  border-left: 5px solid transparent;
}

.heading h1:first-child {
  font-size: 125%;
}

＆＃13;

<div class="heading">
  <h1>
    HEADING
  </h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen链接：https://codepen.io/deelite310/pen/zRjVJx

Answer 1

您的伪元素正在弄乱您尝试使用的属性::first-letter，而不是:first-child。这是使用flex的重写版本：

.heading {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 25px;
  font-size: 38px;
  font-weight: 600;
  color: #14304f;
}

.heading h1 {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}

.heading::before,
.heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: currentColor;
}

.heading h1::first-letter {
  font-size: 125%;
}

<div class="heading">
  <h1>HEADING</h1>
</div>

Answer 2

在span和

中使用h1

.heading h1 span { font-size: 150%; }

＆＃13;

＆＃13;

.heading {
  margin-top: 25px;
  width: 100%;
  font-size: 38px;
  font-weight: 600;
}

.heading h1 {
  display: table;
  width: 75%;
  white-space: nowrap;
  margin: 0 auto;
  text-align: center;
  color: #14304f
}

.heading h1:before,
.heading h1:after {
  content: '';
  width: 40%;
  background: url("https://dummyimage.com/10x1/000/000.png") repeat-x center center;
  display: table-cell;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.heading h1:before {
  border-right: 5px solid transparent;
}

.heading h1:after {
  border-left: 5px solid transparent;
}

.heading h1:first-child {
  font-size: 125%;
}

.heading h1 span {
  font-size: 150%;
}

＆＃13;

<div class="heading">
  <h1>
    <span>H</span>EADING
  </h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.heading h1:first-letter {
    font-weight: bold;
    font-size: 60px;
    float: left;
    line-height: 50px;
    padding: 0 15px 0 0;
}

首先删除所有以前的样式，因为其中一些样式与此冲突。使用这种风格。