I'm wondering it if is possible to display text on a HTML page from a CSS file.
For example for a web host instead of having 100MB display on a plan upon 4 pages and not having to edit each one but the CSS itself.
For example:
CSS
100MB
and than in text
Our plan has {text from css displays here}
Thanks
You can use the :after pseudoselector. Suppose your "our plan has" part has an ID planid, and your HTML looks like this:
<div id = "planid">Our plan has</div>
Then you can do this in the CSS:
#planid:after {
content: ' 100MB'; /*what the element will contain*/
display: inline; /*it's inline*/
/*more styling*/
}
The :after selector creates a pseudo-element after the selected element. To create one before it, use the :before selector.
Little demo: little link.
Used to after before properties
yes do this as like this
HTML
<div>Hello</div>
Css
div:after{
content:'100mb';
}
live demo
more info
you can do this using pseudo elements like :after - http://jsfiddle.net/spacebeers/LQy7T/
.your_class:after {
content: "YOUR TEXT";
color: red;
background: blue;
display: inline;
}
CSS is not designed to do that kind of work, it's for organizing styles and not for managing contents.
What you need is a variable to store your value and then show it many times. So you need PHP, JS, Ruby, Java or your favourite language.
Related
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");
I'm woking on a project that heavily relies on the :target psuedo-class.
If the <a> tag has a name and that name is the text after the # and there is no other element with an id equal to the text after the #, then the a receives the :target.
That was confusing, so here's an example:
<style>
* {
color: black;
}
:target {
color: red;
}
</style>
<div id="wrapper">
<ul>
<li>one_link</li>
<li>two_link</li>
<li>three_link</li>
</ul>
<div id="one">div_one</div>
<div id="two_div">div_two</div>
<div id="three_div">div_three</div>
</div>
If you were to click on the "one_link," then "div_one" would turn red. However, if you were to click on "two_link" or "three_link," then they themselves would turn red (because there isn't a div with the id of the # string, but they have the name of the # string)
What I want is for the :target class to work on both the anchor and the div, or at least a way to select the anchor only when the div is targeted. This can probably be done with Javascript, but I'm trying to use pure css.
Not in pure css. There's no way to "program" css to dynamically change a selector to add some extra text based on something that's been clicked. That's waaaay outside the scope of CSS. That's why there's Javascript.
You can exclude the anchor selection by using div:target
* {
color: black;
}
div:target{
color: red;
}
http://jsfiddle.net/
With the same technique you can try with a:target to get only the current targeted anchor
That's not really possible.
You can't use anything like :target ~ div, because of your HTML structure: there is no way to select a parent element. Even if that wasn't a problem, there's no automatic way to map "nth" a to "nth" div.
With license to change the HTML, I came up with this: http://jsfiddle.net/pA84B/ - it's nasty.
Just use JavaScript.
See Google: HTML, CSS, and Javascript from the Ground Up.
JavaScript is built for behavior and interaction. The Google guys explain it well (I think), plus Google is a bit more authoritative than me. You should use JavaScript for this.
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.