I have a number of div's, each needing a different content attribute in the :after element.
It is not possible for me to style each div individually, because the amount of div's is rather large.
My question: Can I pass the attribute in the html tag itself?
Say I have
Engels
With an :after styling like
content: "this needs to change";
display: inline-block;
color: #A9B0BB;
float: right;
font-style:italic;
How can I pass on the this needs to change string in html? Is there a better way to do this? (preferably without using js)
You could use an attribute for it:
<a title="this will be displayed in the :after">test</a>
CSS:
a:after {
content: attr(title);
display: inline-block;
color: #A9B0BB;
float: right;
font-style: italic;
}
Fiddle
Related
<ul class="points">
<li>sdsds</li>
<li>sdsds</li>
</ul>
I am changing the list style to font awesome icon i want every second list item to be of different color therefore I have used nth-child(even) but it is not working along with before selector.
.
points li:before {
content: "\f1b2";
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
color: #ba2b9f;
}
.points li:before:nth-child(even) {
color: red !important;
}
I'm writing an answer, although I expect this question to get closed:
You have the selectors in the wrong order.
What it should be:
li:nth-child(even)::before
This translates to: every even li child, affect the before pseudo.
The original
li:before:nth-child(even)
This translates to: an even element of a before psuedo. This will never work as there can only be one before (and after pseudo element).
Hi I am having a label which is having a value but I need to add different styles to that words.
<label> 00001 M2 Available </label>
label{
font-size:15px;
}
The font size 15px should be applied to 0001 only. Can anyone help me out regarding this how to achieve using css.
The only way that this is possible, currently, is to wrap that first-word (or whichever other words) in a specific element and style that element:
<label><span>0001</span> M2 Available</label>
label span {
font-size: 15px;
}
You can style the ::first-letter and the ::first-line pseudo-elements with CSS but, for some reason, the W3C chose not, or didn't think, to allow a ::first-word pseudo-element.
It appears, from testing (in Chromium 28/Win XP) that using the ::first-line pseudo-element will style the first-word (though I don't think this is a specified behaviour), so it might not be reliable cross-browser:
label {
display: inline-block;
}
label::first-line {
font-size: 2em;
}
JS Fiddle demo.
References:
CSS Pseudo-elements.
First of all, David's solution is perfect, but if you do not want to add any extra elements, than you can use content: "" property.. if still you can't use this, than you need to go JavaScript
Demo
label.class_name:before {
content: "00001";
color: red;
}
Check the js fiddle
http://jsfiddle.net/9v2n4/
<label> <span style="font-size:15px">00001</span> M2 Available </label>
HTML:
<label><p class="p01">00001</p> M2 Available</label>
CSS:
p.p01{
font-size:15px;
}
Give your label span with a class <label><span class="labelItem"> 00001</span> M2 Available </label>. then style that class .labelItem { font-size: 15px; }
I am using :before to display webfont icons before menu items. For some reason :before is only working on one class and is completely ignoring the other class. If I change both classes on the two li's that should have icons before them to the working class name, the icon shows up.
Ideas?
Here is an example:
http://jsfiddle.net/bigdmachine/erxjE/1/
I'd rather update the CSS to;
nav#al-top-menu .log-out a:before,
nav#al-top-menu .setting a:before {
content: "X";
margin-left: 15px;
margin-right: 5px;
font-family: 'WebSymbolsRegular';
font-size: 14px;
color: blue;
}
I don't think you can create "free" pseudo-elements inside of an <ul> like that, the list should only contain list items.
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:
Email me!
The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
.icon-mail:before {
content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
font-size: 48px;
line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
I've tried this but it's not working (decoration is still visible):
a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
text-decoration: none;
color: white;
}
Insert display:inline-block; in your css. Something like the one below:
.icon-mail:before {
content: "\37";
display:inline-block;
text-decoration:none;
}
Here is the JS FIDDLE:
http://jsfiddle.net/73p2k/18/
As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
See these answers for more details:
CSS text-decoration property cannot be overridden by child element
How do I get this CSS text-decoration override to work?
There isn't any good way around this... the only alternatives that come immediately to mind are:
Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.
Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):
[class^="icon-"]:before, [class*=" icon-"]:before {
display: inline-block;
width: 1em;
height: 1em;
background-size: contain;
content: "";
}
.icon-email:before {
background-image: url(icon-mail.svg);
background-repeat: no-repeat;
}
.icon-large:before {
width: 48px;
height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.
If you do need IE8 support, then you have to fall back to bitmap images:
.icon-email:before {
background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
background-image: url(icon-mail-large.png);
}
A pseudoelement selector must be the last item in a selection chain.
You can apply a style to element:hover:before but not to element:before:hover.
You can set height & overflow:hidden for :before element, and text-decoration will not be visible :)
Tried some things using just the a tag as a markup, but alas. A possible workaround for you may be to inner wrap the link in another element, a span, for instance. Thus you can have the underline on this element (instead of a pseudoelement) - which is perfectly controlled by css.
A live example is here: http://jsfiddle.net/skip405/fQHUH/
This solution worked for me. It excluedes the pseude-elements.
But for this you need to wrap the content of the <a> tag into an extra element.
a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }
<span>content</span>