So I was inspecting some code and noticed within the [page refresh] icon (<i>) tag an element named ::before. Is that pseudo element actually nested inside there or am interpreting this wrong? How does this work? Does it generate an icon "before" the page refreshes? Curious.
The markup:
https://i.gyazo.com/37bc95e0bb2fc7848cb96ecc6d2ad089.png
p::before {
content: "Before-";
}
p::after {
content: "- After";
}
<p> It's simple </p>
This is how works ::before and ::after
Related
I have a html page which has a div looking like this:
<div class="get-this"> blah blah </div>
I have a before pseudoelement on the div and I am trying to apply CSS style only to the div which will not be applicable to the pseudo element.
.get-this:not(::before) {
padding-top:2px;
}
The style is applied to the entire div. IS it possible to restrict the style only to the div and not the pseudo element?
This is a straightforward use of the cascade.
The CSS cascade is intended to enable you to apply general styles to more general selectors and overriding styles to more specific selectors.
Hence:
.get-this {
padding-top:2px;
}
.get-this::before {
padding-top:0;
}
Working Example:
.paragraph-one {
color: red;
}
.paragraph-two {
color: blue;
}
.paragraph-one::before {
content: 'Paragraph One: ';
}
.paragraph-two::before {
content: 'Paragraph Two: ';
color: green;
}
<p class="paragraph-one">This is paragraph one. It is red.</p>
<p class="paragraph-two">This is paragraph two. It is blue.</p>
<p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p>
if you already applied all of your div element to have before or after css they would require you to type content: ""; in order to show style applied to DOM:before or DOM:after
Which means if you set content to none it won't show that.
to overwrite your div style you can simply do
.get-this:before {
content: none;
}
But I would avoid applying before or after properties to all of your div element of your application. div element is often used on many situation, therefore you will run into problem you are now facing on every div element. which mean writing css to overwrite css. that's just not a good practice in most of case.
Also if your DOM element that has before, after its position is related with parent DOM, that being said, if your DOM's padding, margin, positioning, size changes will effect to before or after of that DOM
I need to make a cite attribute visible, ie. showing the url of a blockquote on my webpage. I was told to use only CSS, no html.
Here is what I am currently working with in the html:
<blockquote cite="https://en.wikipedia.org/wiki/History_of_television">
<p>text from wiki</p>
I thought the CSS would be something like: cite href {display: inline-block;}, but that's not working.
I think this is what you're after:
blockquote:before {
content: attr(cite);
}
Here's an example with some additional styling: http://jsfiddle.net/fx4nw3q0/1/
You can show with CSS ::after pseudo-element selector.
blockquote::after{
content:attr(cite)
}
and you can get url with css attr function,
DEMO JSBin
blockquote:after {
content: attr(cite);
display: block;
}
You can use attr(<name>) to pull in attribute values into pseudo blocks by the attribute name.
JSFiddle Example
I'm editing a wordpress site that I dont have access to any of the HTML and only css. I need to input just two lines of text sort of like a "div". Is there any way to do this by only using CSS?
You can use :before or :after pseudo elements like this.
p:before {
color: red;
display: block;
content: 'this is from css';
}
<p>hello there</p>
Could you do it with :before or :after pseudo elements?
div.class-name:after {
content: 'text goes here';
display: block;
[style further as necessary]
}
I made some cool css on my site so I can see what is code and what is not.
Now I want that everytime there is a code block - the text "Code: " will be above the code block.
So I did this:
.code::before {
content: "Code: ";
}
Now the problem is that the text "Code: " is inside the code block, what can I do?
Thank you
Your code is working correctly; pseudo elements do not create line breaks. Here's a workaround:
.code {
position:relative;
margin-top: 1em;
}
.code::before {
position: absolute;
top: -1em;
left: 0;
content:"Code: ";
}
Demo: http://jsfiddle.net/vro5ojb9/
.code::before means a pseudo element inside .code as the first element before any other child elements.
It doesn't mean an element before .code in the document.
CSS Selectors:
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert
generated content before or after an element's content.
Your code is doing exactly what it is defined to do, it's not a bug.
Ref: http://www.w3.org/TR/CSS2/generate.html
Here's a simple jQuery that actually inserts a <p> tag before the instances, no need to offset positioning:
$(function() {
$($('<p>').html('Code: ')).insertBefore('.code');
});
JSFiddle: http://jsfiddle.net/p32ufmza/
I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.
The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:
If you have this css:
p:before {content: 'before--'}
p:after {content: '--after'}
Then html like this:
<p>Original Content</p>
Effectively renders to the screen as if the source code were:
<p>before--Original Content--after</p>
Not as if the source code were:
before--<p>Original Content</p>--after
Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea can contain "content," but only pure text content.
<div class='tx-div-before'></div>
use this before textarea and
<div class='tx-div-after'></div>
use this code after textarea. and add before and after psedu element.
Actually, you can add content with :after on an input element. This will add a sort of tip when the element is in its active state:
#gallery_name {
position:relative;
}
#gallery_name:focus:after {
content: "Max Characters: 30";
color: #FFF;
position: absolute;
right: -150px;
top:0px;
}
<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">