Here is the code I have a question about
.store {
display: block;
position: relative;
}
.store:before, .store:after {
display: block;
position:absolute;
content:'';
}
.store:before {
background: url(store-before.png);
height: 23px;
width: 54px;
top:-3px;
left:-3px;
}
.store:after {
background: url(store-after.png);
height: 20px;
width: 41px;
bottom:-3px;
right:-3px;
}
I noticed that when the "content" is anything besides two apostrophes, the before and after images don't show up. Can somebody explain the meaning of the two apostrophes? Thanks.
The Generated content, automatic numbering, and lists section of the CSS2.1 specification explains this:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
content is what is added to the page. If no content is specified, nothing is added to the page at all (meaning that ultimately no styling gets applied). content: '' adds empty string content to the page.
The two apostrophes denote a string. Two double quotes denote a string as well, which delimiter you use depends on preference and escaping needs; see here for all the details.
If there's nothing between the two string delimiters, either '' or "", then you have an empty string. If you have anything besides a string, it's some other value which may or may not be valid. See here for all the possible values for content. If you pass an invalid value, then like any other style declaration the browser will ignore it, and without any valid value content will default to normal, which is really none for the :before and :after pseudo-elements. That will prevent your pseudo-element from displaying.
To use the before and after elements, it needs to have some form of content before it will show the element, so you can use an empty string to pretend to be something there, obviously a space or empty will show nothing on the page, so you just get the rest of your css styling.
If you remove the content property then it wont show at all.
Its meant to be used for things like "..." or "read more" I imagine without having to have that in your html markup.
Your particular code snippet is probably using it for clearing.
How ever you can use it to put repeating content next to elements like so:
span:before{
content:"Author: "
}
<span>Huckleberry Finn</span>
Will result in:
Author: Huckleberry Finn
Related
Usually when I create a custom element I wrap it in a section or other appropriate HTML element and style that, but this leads the DOM looking like custom-element > section.
My question is, is it wrong to remove the section and simply treat custom-element as the root element and style that?
For example I have a custom element called tabs, right now when it's used the DOM ends up looking like tabs > div.tabs but I'd prefer to remove the div.tabs element if there's nothing wrong with that.
So my question is is it "wrong" to style my custom elements and treat them as any other HTML element, or should I continue to ignore my custom elements completely (even though it's hard to do so when you use > and other selectors)?
There is absolutely nothing wrong with styling custom elements. To reassure you, custom elements are valid HTML and unless you're supporting an older browser less than Internet Explorer 9, then you'll need to do some extra work to get the browser to recognise them.
I style custom elements all of the time, I even style Aurelia's <router-view> custom element as well.
It's better...
Don't forget that the default CSS display for a custom element is inline.
So if you want to use border, width... you should explicitly set display (to inline-block for example):
custom-element {
background: lightgreen;
width: 60px;
border: 1px solid blue;
}
.ok {
display: inline-block;
}
<custom-element>This is
<div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
<div>fine</div>
</custom-element>
I tried this:
input[time] {
margin: 2px;
}
...but it does nothing.
Just to see what, if anything would happen, I also added parring: 2px; but still nothing. So how can I get the time element to shove other elements that invade its personal space out of the way?
you need to specify it is a type like so
input[type="time"]{
margin: 2px;
}
This article goes other this further if you are interested,
Kieran
Use input[type="time"] instead of input[time]
The [attribute] CSS selector targets HTML tags who have a certain attribute no matter the attribute's value.
The [attribute="value"] CSS selector targets HTML tags with an attribute with a set value.
I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.
I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.
So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?
Thank you!
No, you can’t; there is no CSS construct for such purposes at present.
What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.
I don't think you can do this with CSS alone. But here is a way to do it using JQuery:
function (yourObject) {
yourObject.html(yourObject.html()
.replace(///g, '<br>')
.replace(/\/g, '<br>'));
}
This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.
A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:
.longtext {
width: 100%;
display: block;
word-break: none;
overflow: auto;
background: #eee;
}
http://jsfiddle.net/mblase75/NCNSa/
Is it valid to name divs like this?
<div class="frame header">Some content here</div>
With a space in the name? Then, of course, in the css I would have something like:
.frame { display: block; }
.header { background-color: #efefef; }
I guess I'm just wondering if you can have a space in the actual markup like I posted and it be XHTML strict? I've checked on the W3C validation, but for some reason, anything I put in there is passing. Sigh...
ids and classes can't have spaces. If you put a space then you're adding two classes, so W3 is interpreting that as it is and won't throw you an error. Your css is correct.
Yes, you can. The class is not really a 'name' for the element, but a list of classes that apply to it, separated by spaces. If you want that element to have a specific 'name' that pertains only to it, use the id attribute. Remember that is has to be completely unique in the document, and also that ID's cannot have spaces.
Something like:
<div class="frame" id="header">Some content here</div>
.frame { display: block; }
#header { background-color: #efefef; }
What you are doing is valid.
However, any number of <div> elements in an html/xhtml document can have the same class definitions for presentation purposes.
Since the name attribute has been replaced with id attribute in xhtml, it is always better to have an ID attribute to uniquely name and reference a particular element.
I'm trying to find some uptodate info about various possible uses for content: property in css but only find stuff in the ancients dungeons of the web dating from 2004 orso so I thought I have to ask this in 2011 again:
p:before {
content: url(dingdong.png);
}
p:before {
content: "some text ";
}
I'm very new to both the :before selector as well as the content: property and heard of it accidentally on this question which was answered very creatively by a lovely lady:
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
Only to find out that some problems might occur concerning the actual encoding of the content:
li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?
And so my concrete question is: besides url() and "text", are ther other possibilities?
Thanks very much for your suggestions and ideas.
Oh, too many to list. Some of the most common cases are:
Special numbering, with the counter() function, along with the counter-reset and counter-increment properties
Pure CSS clearfix with:
.foo:after {
content: "";
display: block;
clear: both;
}
Display attributes, eg to print URLs for hyperlinks in a print stylesheet
a[href]:after {
content: ' (' attr(href) ') ';
}
Add typographic ornaments that shouldn't be in the HTML because they're presentational. For example, in my blog, I've used it for the ornaments between posts or sidebar links.
Add icons to hyperlinks, depending on where they point, like
a[href^="http://twitter.com/"]:before {
content: url('twitter-icon.png');
}
Adding a pointer to make a CSS-only speech bubble:
.bubble {
position: relative;
background: silver;
}
.bubble:after {
content: "";
border:10px solid transparent;
border-top-color:silver;
position: absolute;
bottom:-20px
}
And many, many other.
Just beware: If something is not presentational, it should probably be in your HTML. Users will not be able to select CSS generated content, and screen readers will ignore it.
You can also use a counter.
See http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter
You can also display a certain attribute of the element selected.
See http://jsfiddle.net/EcnM2/
You can also add or remove opening and closing quotes.
w3schools content property list: http://www.w3schools.com/css/pr_gen_content.asp
Generated content won't be perceived by screen readers so beware of accessibility issues.
content is very useful but there are cases where this text should be in the HTML code because it conveys information and isn't only decorative (a bit like background images in CSS vs informative img with a non-empty alt attribute)
:after and content can be used as a clearfix with no extra div
:before and :after bring multiple backgrounds (up to 3 w/ the element itself) to browsers that don't understand the CSS3 feature.
EDIT: forgot about Eric Meyer's article in A List Apart about printing the href attribute of links along with their text with the help of content (it was followed by a JS improvement, fyi)