I'm trying to add an html entity (→ →) using css when a link is hovered with the following css:
#menu1 a:hover:after {
content: "→";
}
But the output is just → instead of →. The same problem happens when using the decimal (8594) or the entity (rarr).
How do I include an HTML entity with css?
#menu1 a:hover:after {
content:"\2192 ";
}
Working example: http://jsfiddle.net/wCzUf/
More details - Can you use HTML entities in the CSS “content” property?
List of HTML entities - http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
That depends on how you include the CSS in your HTML file. Inside an inline stylesheet, the entity should work.
If you have an external stylesheet, you can't use HTML entities. Just put in the character itself ("→"), properly encoded with the .css file's charset. Alternatively, you can use a Unicode escape sequence, in your case "\2192" (the hex value of 8594).
This was already answered before in another question. As per the solution, you need to use escaped Unicode in CSS content property.
#menu1 a:hover:after {
content: "\002192";
}
Related
I am working on jqGrid. I tried to apply some custom style on jqGrid pager and it is working fine when I put them in style tag of html. Something like given below.
<style>
.ui-paging-pager {
background-color: white !important;
}
</style>
But, when I store them externally in .css file, it is not working. I have created customPager.css file, in which I have stored all the css code for pager and used the path of the css file in html file link.
Can someone tell me where am I wrong and How to store custom css in external file for JqGrid?
Inline styles or those in <style> tags within a document will automatically override externally defined style rules.
However to override a style in an external stylesheet you need to give the rule you define in your own stylesheet a higher specificity. You can do that by including the parent elements in the selector. For example:
#container .foo > .bar .ui-paging-pager {
background-color: white;
}
Also note that the !important rule should be avoided for this reason.
Is there any ways to add custom css prefix class for thousand of line css codes?
I found some solutions, not fully ok
method1
We could search and replace in editor, but it is not correct for all the cases like float value css.
method2
I googled and showed me like wrapping custom css class. like below
.myprefix .btn {}
.myprefix .text-muted {}
// this solution is not cool
I want like .myprefix-btn, .myprefix-text-muted, .myprefex-bg ?
if you are using SCSS then you can achieve this by following code:
.myprefix{
&-btn{
color: red;
}
&-text-muted{
color: green;
}
}
Make sure your html inherit those btn, text with parent myprefix.
Enclose your whole CSS with a class-name of your choice.
Example:
.myprefix {
/*Source files*/
}
Now you have an SCSS file.
Then go to this link and copy paste your code and convert it to CSS file.
You'll notice that all the your CSS classes have be preceded with myprefix
Currently in java I am generating an HTML document with applicable CSS styles.
I have verified that my document is correct, however it appears that the :first pseudo selector is not working when I use it in conjunction with a named page. as an example:
#page mainReport:first {
#top-center {
content: element(header);
vertical-align: bottom;
};
#bottom-center {
content: element(footer);
vertical-align: top;
};
}
The reason for me doing this is that I want to use the first page on a specific named page, does the CSS selector support this functionality for paged media? And if not, is there a work around for this issue, either through flying-saucer or some sort of CSS magic.
Thanks
I am working with Drupal and with that, I don't always have the freedom to add a class by altering a html tag, however. I would like to apply some Twitter Bootstrap styling on an element from my custom.css file (the bootstrap css file is loaded, so styling is available).
To illustrate it better, for example, I would like to apply class="img-polaroid" (TB base styling) to an image that I can interface as div.someClass in my custom css stylesheet. I don't have simple way to alter the img tag to have class="img-polaroid someClass".
I would like to accomplish the same in my custom stylesheet. In another words, the merge happens not in the html tag but in the css stylesheet itself. How can I accomplish this with the current technologies in place? Are we there to make this possible?
Thank You
p.s. I am aware of alternatives:
-use JS to append class
-Copy and past the styling of class="img-polaroid" into div.someClass {...}
But both seem like not so nice solutions
How you go about this depends on which CSS Preprocessor you're using. You must choose one if you want to avoid modifying TB itself or the markup.
Sass
.foo {
#extend .bar;
}
Output:
.bar, .foo {
// styles
}
LESS
.foo {
.bar;
}
Output:
.bar {
// styles
}
.foo {
// styles
}
You can locate the part of the CSS code that you want to apply to the element in the bootstrap stylesheet and rewrite the selectors or copy the code to another file with new selectors so the style applies to both
.selector-from-bootrap,
.my-new selector{
...
}
I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?
Try this:
#target:before {
content: "\2611";
}
You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)
A heavy checkmark is listed as U+2713 so you would put content: "\2713";
Use the checkbox character literally in your CSS rule instead of the encoding -
#target:before {
content: "☑";
}
See: http://jsfiddle.net/e3Wt2/