Question

我有这段代码：

<style>
.caps {
 text-transform: capitalize
}
.stuffBefore:before {
 content: 'a';
}
</style>

<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>

我基本上想要实现的是显示

aStuff After

但实际得到的是

Astuff After

我无法在“a”和“stuff”之间添加空格（将此作为问题的示例，真正的问题稍微复杂一些）但我认为“span”标记将充当分隔符，就像空白一样。我可以通过添加更多CSS来实现它吗？

Answer 1

以下是一种方式：

JsFiddle ：https://jsfiddle.net/8vzmv06p/

＆＃13;

procedure TForm1.DBGrid1DrawDataCell(Sender: TObject; const Rect: TRect; 
  Field: TField; State: TGridDrawState); 
begin 
  if Field.FieldNo = 2 then 
  begin 
    DBGrid1.Canvas.FillRect(Rect);  
    DBGrid1.Canvas.Draw(Rect.left, Rect.Top, imageSource) 
end;

＆＃13;

.caps {
 text-transform: capitalize;
 position:relative;
}
.caps > span{
 float:left;
}
.stuffBefore:before {
 content: 'a';
 text-transform: none;
}

＆＃13;

Answer 2

.caps > span{
 float:left;
}
.stuffBefore:before {
 content: 'a';
}
.stuffBefore + span {
 text-transform: capitalize;
}

<div class="caps"><span class="stuffBefore"></span><span>stuff after</span></div>

Answer 3

你可以试试这个

＆＃13;

.caps {
 text-transform: capitalize
}
.stuffBefore:before {
 content: 'a';
 float: left;
 text-transform: none;
}

＆＃13;

<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>

＆＃13;

Answer 4

您需要.stuffBefore span吗？如果没有必要，您可以简化代码：

＆＃13;

.caps span {
  text-transform: capitalize;
}

.caps span:before {
  content: 'a';
  text-transform: none;
  float:left;
}

＆＃13;

<div class="caps">
  <span>stuff after</span>
</div>

＆＃13;

即使没有span：

＆＃13;

.caps  {
  text-transform: capitalize;
}

.caps:before {
  content: 'a';
  text-transform: none;
  float:left;
}

＆＃13;

<div class="caps">
  stuff after
</div>

＆＃13;

使用内容属性的前一个跨度大写跨度：在

4 个答案: