I have this code:
<style>
.caps {
text-transform: capitalize
}
.stuffBefore:before {
content: 'a';
}
</style>
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
What I'm basically trying to achieve is to show
aStuff After
but what i actually get is
Astuff After
I can't add a space between "a" and "stuff" (get this as an example of the problem, the real problem is a little more complex) but i thought the "span" tag would act as a separator, like the whitespace.
Can I achieve it by adding further CSS?
Here is one way :
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>
.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>
You can try this
.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>
You need the .stuffBefore span? If not necessary you can simplify your code:
.caps span {
text-transform: capitalize;
}
.caps span:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
<span>stuff after</span>
</div>
Even without span:
.caps {
text-transform: capitalize;
}
.caps:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
stuff after
</div>
Related
I want to style only one character inside the content of an ::after. Is it possible? Considering that the div has content inside.
In this example I want the "↵" to be bold. But not the "press ENTER" text.
.div::after {
content: "press ENTER ↵";
font-size: 11px;
color: #5a5b8d;
}
If there is no other text in the button, you could split your text in between the before and after:
.button {
font-size: 11px;
color: #5a5b8d;
}
.button::before {
content: "press ENTER";
}
.button::after {
content: " ↵";
font-weight:bold;
}
<div class="button"></div>
It's crazy, but this will work. Working example: http://jsfiddle.net/Lf8xvcyq/1/
Try this:
HTML:
<div class="button"></button>
CSS:
.button {
/* Your normal CSS */
}
.button::first-letter {
font-size: 11px;
font-weight: bold;
color: red;
}
.button::after {
unicode-bidi:bidi-override;
direction:rtl;
content: "↵ RETNE sserp";
font-size: 11px;
color: blue;
}
You can consider flexbox and the order property in case you will have content then you will be able to use both pseudo element:
button {
font-size: 11px;
color: #5a5b8d;
display:flex;
}
button::before {
content: "press ENTER";
order:1;
padding:0 2px; /*flexbox erase whitespace so we add padding*/
}
button::after {
content: "↵";
padding:0 2px;
font-weight:bold;
order:1;
}
<button >some content</button>
I wand to make my first letter in <span> in capital. But when i use :before in the span capitalize is not working.
span { display:inline-block; color:#66a400; }
span:first-letter { text-transform:capitalize; }
span:before { content:"-"; padding:0 2px; }
<span>my first word</span>
I need out put like below
- My first word
You can use :after instead of :before and float it to the left:
span {
display: inline-block;
color: #66a400;
}
span:first-letter {
text-transform: capitalize;
}
span:after {
content: "-";
padding: 0 2px;
float: left;
}
<span>my first word</span>
It's a problem due to the span:before selector, see below.
From https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
The first letter of an element is not necessarily trivial to identify:
...
Finally, a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element.
In that case, ::first-letter will match the first letter of this
generated content.
If you want the "-" before the content with first letter capitalized, you can do as follows, changing your structure and css
CSS
span { display:inline-block; color:#66a400; }
span#before::before { content:"- "; padding:0 2px; }
span#content { text-transform:capitalize; }
HTML
<span id="before"></span><span id="content">my first word</span>
span { display:inline-block; color:#66a400; }
span:before { content:"-"; padding:0 2px; }
span { text-transform:capitalize; }
<p><span>my</span> first word</p>
Try the following:
span::first-letter {
text-transform: uppercase;
}
how can i set a different color for brackets around the incrementor in an ordered list. Or how can set another color just for the incrementor?
for details please visit jsfidlle link. https://jsfiddle.net/bnk2saqe/
ol { list-style: none; padding-left: 2em; text-indent: -2em;}
.simple-footnotes-list li::first-letter {
color: blue;
}
ol .simple-footnotes-list li::nth-child(3) {
color: blue;
}
.simple-footnotes-list li:before {
content: "[" counter(section, decimal) "]";
color:#FF4500;
font-weight: bold;
}
li { counter-increment: section;}
This works:
.simple-footnotes-list li:before {
content: "[" counter(section, decimal) "]";
font-weight: bold;
}
.simple-footnotes-list li:nth-child(1):before {
color:#FF4500;
}
.simple-footnotes-list li:nth-child(2):before {
color:#45FF00;
}
You could also use nth-child(xn) for cycling colors.
Fiddle
Say I've got:
.apple {
color: red;
}
Now, let's say I've also got:
.big {
.apple {
font-size: 1.25em;
}
}
Is there a way I can put the .big selector inside the rule for .apple? In psuedocode, something like:
.apple {
color: red;
&:[WHEN INSIDE `.big`] {
font-size: 1.25em;
}
}
You place the & at the end:
.apple {
color: red;
.big & {
font-size: 1.25em;
}
}
I have this CSS
.pages a {
text-decoration: none;
color: #1e1e1e;
font-weight: bold;
display: inline;
padding-left: 8px;
}
.pages a:after {
content: "|";
padding-left: 8px;
}
I want the content in a:after have the | after the last "a". How would I do that? I tried using :last-of-type, but it didn't work.
It currently looks like this
1 | 2 | 3 |
You may try this
/*Other style goes here*/
.pages a:last-child:after {
content: "";
}
DEMO.
Try using this
.pages a:after {
padding-left: 8px;
}
.pages a:not(:last-child):after {
content: '|';
}
Fiddle
This will add the padding to all of the .pages a, and it will add the | for any a that isn't the last child of .pages
Here's what you want, I guess:
http://jsfiddle.net/VVv7f/
.pages a {
text-decoration: none;
color: #1e1e1e;
font-weight: bold;
display: inline;
padding-left: 8px;
}
.pages a:after {
content: "|";
padding-left: 8px;
}
.pages a:last-child:after {
content: ""; /* this line overwrites your "|" with empty "" */
}
What about this, last-of-type will work
.pages a:last-of-type:after{
content: '';
}