は、前のスパンがでcontentプロパティを持つスパンを大文字：

Question

前に、私はこのコードを持っている：私は基本的に達成しようとしている何

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

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

は

後

aStuffを表示することですが、何私は実際に

た後、私はbetwスペースを追加することはできません

Astuffありますeen "a"と "stuff"（これを問題の例として挙げると、実際の問題はもう少し複雑です）しかし、私は "span"タグが空白のようにセパレータとして機能すると思いました。 それ以上のCSSを追加することでそれを達成できますか？ここで

Answer 1

一つの方法である：

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

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

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

Answer 2

は、あなたがこの

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

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

を試すことができます

Answer 3

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

あなたは.stuffBeforespanが必要ですか？

.caps span { 
 
    text-transform: capitalize; 
 
} 
 

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

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

でも spanなし：あなたのコードを簡素化することができます必要がない場合は

.caps { 
 
    text-transform: capitalize; 
 
} 
 

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

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