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;
}
Related
Hi I have a list item containing text like this:
<li>Search</li>
and I want to display an icon using font awesome
li:before {
content: "\f002";
}
I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go:
li {
text-indent: -1000px;
overflow: hidden;
}
but that will hide the pseudo element as well
A bit late to the party, but you could always change the font-size of the li to 0, and change the font-size of the icon back to the original font-size. Like this:
li {
font-size: 0;
}
li:after {
font-size: 1em;
}
You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:
li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}
http://jsfiddle.net/Fiddel/aopteq8m/
This is pretty hacky, and don't tell anyone I did this, but jsfiddle.net/57BGV.
li {
list-style: none;
text-indent: -65px;
}
li:after {
content: "Test";
display: inline-block;
padding-left: 80px;
}
One way to do it would be to change the font-color to whatever the background-color is. This won't remove the text from the flow but will hide it, which is what you're asking, technically.
Assuming your background is white:
li {
color: #FFF;
}
The first div looks like this
<div class="item ui-droppable feed masonry-brick">
The second one has an additional class small
I would like to modify the descending element when the class selector is small and change the color to black /properties of those items .
I have tried the following with no success:
.item .more .deliverytype {
color: red;
display: inline;
font-size: 20px;
font-weight: 500;
position: absolute;
right: 7px;
text-align: right;
top: 54px;
}
.small .deliverytype {
color: black;important!
}
Fiddle here
Just be more specific - no need for !important, just use .small.item.
.small.item .more .deliverytype {
color: black;
}
jsFiddle here - it works.
Since color:red was being set via .item .more .deliverytype, you just needed to add in .small. Therefore if the parent contains both .small and .item (.small.item), it would style the .deliverytype which is a descendant of .more.
I have a problem with nth-of-type(odd):before and first-child:before
I need to disable :before content in first "li" element.
Problem is that css don't react to first-child:before..
P.S I'm using LESS
So, there is a code:
li {
&:first-child {
&:before {
content:none;
}
}
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
}
li:first-child and li:nth-of-type(odd) will both match the same element, so in this case your second rule is completely overriding the first.
The simplest way around this is to move your first rule below, since both of your selectors are equally specific (1 element, 1 pseudo-class, 1 pseudo-element):
li {
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
&:first-child {
&:before {
content:none;
}
}
}
Note that because both selectors are matching the same element, the margin style will still apply to the first child's :before. But since you're using content:none in the second rule, you're effectively disabling the :before pseudo-element, so you shouldn't need to change anything else.
That said, if you want to cancel it out explicitly anyway, you can:
li {
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
&:first-child {
&:before {
content:none;
margin:0;
}
}
}
I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.
My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?
I tried like that with ":before" but that does not seem to do the trick
ThinkingRock
{
background-color: #ffffff;
width: 100%;
}
project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}
The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>
:before is a pseudo-selector itself, so it needs its own style block, like below:
project:before {
content:"Projekt:";
}
project {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
fiddle: http://jsfiddle.net/wNEt3/
fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/
Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D
use z-index , z-index Only Work with position: fixed,relative,absolute:
project:before {
width:100%;
height:100%;
position:absolute;
content:"";
z-index:-2;
}
project {
position:relative;
display: block;
z-index:30;
}
or:
project:before {
width:100%;
height:100%;
position:relative;
content:"";
z-index:-2;
}
project {
display: block;
z-index:30;
}
documention : https://www.w3schools.com/cssref/pr_pos_z-index.asp
I need to make a custom list-style markers. Now it's done by adding element before li, but exist one problem. The remaining lines should be aligned with the text for the marker, such as normal marked list, but they don't.
li p::before {
content: "* ";
}
How I make padding for second, third and etc lines, and make it cross-browser? (IE8+, FF3+, Opera 11+ and Crome)
li p:before { /* thanks Michael */
content: "* ";
float:left;
}
li p {
overflow:auto;
}
Maybe this will work. May I know why can't you use images (simple curiosity)?
EDIT: I was wrong, :before insert pseudo-element before content, so
<div id="wrap">
<ul>
<li><p>Get order of list items in a jQuery Sortable list after resort ... The trick is I would like to capture the order of the items immediately ... And I'm aware that it's also possible to assign a call-back function that fires when sorting st</p></li>
</ul>
</div>
#wrap
{
position: absolute;
top: 100px;
left: 100px;
}
li
{
list-style-type: none;
}
li p
{
overflow:auto;
}
li:before {
content: "* ";
float:left;
}
will work.
You can either set the p and li to float: left; (example 1)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}
or set the display to inline-block (example 2)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}