I am learning CSS and I am having a bit of trouble recognizing properties and understanding some of the syntax. in the CSS below.
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
}
I understand that tabs is a class and the nav li with the class tab-current within the tabs class in html will be applied with the same CSS.
Example:
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
However I'm not quite sure what :before and :after represent. Could someone provide me with an example? Thank you
They set something after and before the element you are selecting. For example:
p:after {
content: 'hi! im after';
}
p:before {
content: 'hi! im before';
}
You will understand it better if you see this fiddle.
:before and :after create pseudo elements as 'children' for the element they are applied to. They are often used for certain stylings, or error messages.
Fiddle: http://jsfiddle.net/XjUM8/1/
div:before {
content: "Before";
background: red;
}
div:after {
content: "After";
background: blue;
color: white;
}
You can also set them up to show up on hover
Fiddle : http://jsfiddle.net/XjUM8/2/
div:hover:before {
content: "Before";
background: red;
}
div:hover:after {
content: "After";
background: blue;
color: white;
}
Also, take a look at MDN :
Before & After
:before and :after are CSS Selectors that allow you to add content before or after the element in question. An example is of adding an arrow after a link to show progress:
HTML
<div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>
CSS
.testAfter:after{
content:"\25B6"
}
.testBefore:before{
content:"\25C0"
}
Fiddle to show:
http://jsfiddle.net/yPkVL/1/
You can add all kinds of things; images, text, etc. You can style them and add different positionings. You can do all kinds of things. It's like adding an extra div before or after the div in question without having to change the HTML markup.
Reference:
Before
After
:after and :before are called pseudo-elements. They're used to inject some content to your DOM through the CSS.
For instance, say you want to add an icon after every link that targets external websites (we'll assume that these links href all begin with "http://"). This would be a real pain in the neck to try and append this manually. Using the CSS pseudo-element :after, you can simply do something like this :
a[href^="http://"]:after {
content:url('href.png');
}
and bam ! You're good to go.
:after and :before allow you to simply inject some text or image, but they can also be used in many creative ways.
Beware though, they can be applied to anything except "replaced elements" : this means that you won't be able to use those pseudo-elements on tags such as <input>, <textarea>, <object>, <img>, etc.
The W3School explains it pretty well, did you read that up and not understand something?
Essentially what it means is you're going to insert whatever is in the :before area before what content is already in there, and the :after after the content.
:before and :after are selectors, they're used to select what you want to style.
The example on w3schools is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p::before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
What this does is print out:
Read this - My name is Donald and Read this - I live in Duksburg
After will esentially do the same thing.
There are
Related
How can I write :hover and :visited condition for a:before?
I'm trying a:before:hover, but it's not working.
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.
Write a:hover::before instead of a::before:hover: example.
To change a menu link's text on mouseover (different language text on hover), here is the
jsfiddle example
HTML:
<a align="center" href="#"><span>kannada</span></a>
CSS:
span {
font-size: 12px;
}
a {
color: green;
}
a:hover span {
display: none;
}
a:hover:before {
color: red;
font-size: 24px;
content: "ಕನ್ನಡ";
}
Try to use .card-listing:hover::after, hover, and after using ::. It will work.
Or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
For example:
<li><span data-icon='u'></span> List Element </li>
instead of:
<li> data-icon='u' List Element</li>
This way you can simply say
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element.
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size: 12px;
}
a {
color: green;
}
.test1>a:hover span {
display: none;
}
.test1>a:hover:before {
color: red;
content: "Apple";
}
</style>
</head>
<body>
<div class="test1">
<span>Google</span>
</div>
<div class="test2">
<span>Apple</span>
</div>
</body>
</html>
Note: The hover:before switch works only on the .test1 class
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
How can I write :hover and :visited condition for a:before?
I'm trying a:before:hover, but it's not working.
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.
Write a:hover::before instead of a::before:hover: example.
To change a menu link's text on mouseover (different language text on hover), here is the
jsfiddle example
HTML:
<a align="center" href="#"><span>kannada</span></a>
CSS:
span {
font-size: 12px;
}
a {
color: green;
}
a:hover span {
display: none;
}
a:hover:before {
color: red;
font-size: 24px;
content: "ಕನ್ನಡ";
}
Try to use .card-listing:hover::after, hover, and after using ::. It will work.
Or you can set pointer-events:none to your a element and pointer-event:all to your a:before element, and then add hover CSS to a element:
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
For example:
<li><span data-icon='u'></span> List Element </li>
instead of:
<li> data-icon='u' List Element</li>
This way you can simply say
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element.
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size: 12px;
}
a {
color: green;
}
.test1>a:hover span {
display: none;
}
.test1>a:hover:before {
color: red;
content: "Apple";
}
</style>
</head>
<body>
<div class="test1">
<span>Google</span>
</div>
<div class="test2">
<span>Apple</span>
</div>
</body>
</html>
Note: The hover:before switch works only on the .test1 class
If you check the form at this link, you'll see that required fields have a class="required" in the CSS and a * in the markup.
http://drupal.org/user
Can the * which shows in the markup be added entirely with CSS for divs that have this class?
You can use the after pseudo class:
.required:after { content: "*"; }
or, because you explicitly asked for a div with that class:
div.required:after { content: "*"; }
Should work (for IE only since IE8)
You can apply any style to this, of course. You can even do things like this:
div.required:after:hover { /* Hello, I'm a geek. */ }
This can also be achieved with JavaScript. jQuery:
$(".required").append("*");
span:after { content:"*"; }
Demo: http://jsfiddle.net/W3gHU/
You can use the :after or before css pseudo element for this, more info, also abt which browsers support it here.
You could add an image of a star via CSS. This should work in all browsers.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Try this page:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
:after is understood by probably everything except for IE (hopefully IE9 will have support)
Update taking into account comment of Šime Vidas:
it was just example of using. Of course it would bring more sense if we make it this way:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
then we can even add unobtrusive javascript validation to that field (so this way brings good advantages). The problem is that this refactored page will be displayed as we want it only in Opera (I checked it on all last builds of browsers, except for FireFox 4, but I'm not sure FF will change the way they take that style into account).
:after and :before do not work for input and img elements; there is related discussion of why. $(".required").before("*") from jQuery however will work everywhere, but that's more about JavaScript then CSS (and was mentioned before by other people).