Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?
No, it is not possible, as such.
When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)
In other words: a:after { content: "<" } will yield the equivalent visual to Some Link<.
a:after { content: "♦" }; will work perfectly, tho'.
You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at
http://www.w3schools.com/css/pr_pseudo_after.asp
http://www.w3schools.com/css/pr_pseudo_before.asp
You should always avoid using CSS content because it's wrong to mix presentation with content of the page.
Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.
If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:
<style type="text/css">
abbr { padding-right:20px;
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>
<abbr>Something</abbr> very very Important goes here.
Result:
The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.
Related
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
Is it possible to prefix the "li" items with a small image ? I didn't find a suitable css attribute for it.
You can use an image for the bullet point:
ul { list-style-image: url("fancybullet.gif"); }
Failing that, you cold set the list-style-type to none, and then use CSS to place an image in the right place, like in this article.
You could use the CSS :before pseudo-selector.
li:before { content: url(image.jpg); }
Note this may not work completely correct in IE8 and below. Here's some more information on the :before and :after selectors.
I feel you may be better off doing this in Javascript however using a library like jQuery. I assume this is a problem that needs a dynamic solution after HTML is rendered to the screen, in this case it may be best to use Javascript.
I would like to print some text with CSS. Please let me know if there is any property to do this. I know CSS is only styling but I got a requirement to do like that. thanks.
Take a look at the CSS 2 spec - the generated content section.
You are looking for the content property.
This property is used with the :before and :after pseudo-elements to generate content in a document.
And:
The following rule causes the string "Chapter: " to be generated before each H1 element:
H1:before {
content: "Chapter: ";
display: inline;
}
The CSS content property may be what you need.
I'm working on a site which has line breaks inserted as <br> in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks?
I'm mobile optimising the site so I don't really want to use JavaScript.
With css, you can "hide" the br tags and they won't have an effect:
br {
display: none;
}
If you only want to hide some within a specific heading type, just make your css more specific.
h3 br {
display: none;
}
Note: This solution only works for Webkit browsers, which incorrectly apply pseudo-elements to self-closing tags.
As an addendum to above answers it is worth noting that in some cases one needs to insert a space instead of merely ignoring <br>:
For instance the above answers will turn
Monday<br>05 August
to
Monday05 August
as I had verified while I tried to format my weekly event calendar. A space after "Monday" is preferred to be inserted. This can be done easily by inserting the following in the CSS:
br {
content: ' '
}
br:after {
content: ' '
}
This will make
Monday<br>05 August
look like
Monday 05 August
You can change the content attribute in br:after to ', ' if you want to separate by commas, or put anything you want within ' ' to make it the delimiter! By the way
Monday, 05 August
looks neat ;-)
See here for a reference.
As in the above answers, if you want to make it tag-specific, you can. As in if you want this property to work for tag <h3>, just add a h3 each before br and br:after, for instance.
It works most generally for a pseudo-tag.
If you add in the style
br{
display: none;
}
Then this will work. Not sure if it will work in older versions of IE though.
This is how I do it:
br {
display: inline;
content: ' ';
clear:none;
}
You can use span elements instead of the br if you want the white space method to work, as it depends on pseudo-elements which are "not defined" for replaced elements.
HTML
<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>
CSS
span {white-space: pre;}
span:after {content: ' ';}
span.line-break {display: block;}
span.line-break:after {content: none;}
DEMO
The line break is simply achieved by setting the appropriate span element to display:block.
By using IDs and/ or Classes in your HTML markup you can easily target every single or combination of span elements by CSS or use CSS selectors like nth-child().
So you can e.g. define different break points by using media queries for a responsive layout.
And you can also simply add/ remove/ toggle classes by Javascript (jQuery).
The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).
As an alternative it is also possible to add a line break via pseudo-elements:
span.break:before {
content: "\A";
white-space: pre;
}
DEMO
For me looks better like this:
Some text, Some text, Some text
br {
display: inline;
content: '';
}
br:after {
content: ', ';
display: inline-block;
}
<div style="display:block">
<span>Some text</span>
<br>
<span>Some text</span>
<br>
<span>Some text</span>
</div>
For that you can just do like this:
br{display: none;}
and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :
pre {white-space: normal;}
Or you can follow the style of Aneesh Karthik C
like :
br {content: ' '}
br:after {content: ' '}
I think you got it
As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.
Check the example here. This CSS works in
Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)
br {
content: " ";
float:right;
}
I hope this will answer your question!!
While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox.
Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems.
The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.
.noLineBreaks br:before{
content: '\a0'
}
Have a look.
Yes you can ignore this <br>.
You may need this especially in case of responsive design where you need to remove breaks for mobile devices.
HTML
<h2>
Where ever you go <br class="break"> i am there.
</h2>
CSS for mobile example
/* Resize the browser window to check */
#media (max-width: 640px)
{
.break {display: none;}
}
Check out this Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM
You can usedisplay:contents
br {
display:contents;
}
see https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
[display:contents;] These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes [...] most browsers will remove from the accessibility tree any element with a display value of contents. [...] no longer be announced by screen reading technology.
You can simply convert it in a comment..
Or you can do this:
br {
display: none;
}
But if you do not want it why are you puting that there?
I haven't found any documentation yet, so I don't think it's doable.
But it's worth asking.
Can I specify actual Text inside a style, within the stylesheet?
I have a few places that use the same text in the same div places. And instead of using javascript or retyping the same text in the divs, I was pondering if styles can have actual "text" inserted inside.
.someclass {
text:"for example"; /* this is how I'd imagine it, IF it were possible */
color:#000;
}
I might be pushing this one.
You're looking for the content property.
Unfortunately, it can only be used with pseudo-elements.
This property is used with the :before and :after pseudo-elements to generate content in a document.
So you could do something like...
.someclass:before {
content: "This text will be added at the beginning of the element"
}
.someclass:after {
content: "This text will be added at the end of the element"
}
you can use this approach with the :before and :after pseudo-elements
.someclass:after {
content:"for example";
color:#000;
}
Use before or after pseudo-class to acheive this:
For example:
.someclass:before{
content:"for example";
}
I do not think that could be done in CSS. But in jQuery it would look like :
$('.someclass').html("for example");