in the code:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: absolute;
top:500px;
width:400px;
border:1px solid green;
}
.parent:before {
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
.child {
Color:black;
border:1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Hello I am child</div>
</div>
</body>
</html>
I'm trying to create a transparent background as described in this thread: How to set opacity in parent div and not affect in child div?.
Looking at the code from the 4th answer. How does this work, I'm confused with the use of .parent and .parent:before. I would think that this would create a .parent:before element before every parent element. Really confused how does this work?
:before creates a virtual content using CSS, so in the above case, author uses below snippet means
.parent:before{
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
He is creating a virtual element using :before, which he then positions absolute, assigns some dimensions, and assigns the background, to make sure that it stays below the div content, he uses z-index: -1;
In other words, :before, :after are nothing but assume nesting two span elements inside your div, but by using pseudo elements, you don't need to have span as you can achieve the same thing with the pseudo elements.
Consider you have something like this
<div>
Hello
<span></span>
</div>
div {
position: relative;
}
div span {
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
Demo
Can be also achieved using :before or :after, markup stays the same but CSS goes like
div {
position: relative;
}
div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
Demo
So, it just saves you one empty element in your HTML, but if you look at the above CSS, am using content property which is ALWAYS associated with :before or :after, and yes, it is required, even if you keep it blank.
Also, note that :before and :after generated content are inline, so inorder to make height, width work, you need to explicitly mention display: block; or display: inline-block; if you want to make it block level, but in this particular case, you won't need that as the pseudo element is positioned absolute
div:after {
content: "Hello";
margin-top: 20px; /* This wont work as pseudo is inline by default */
}
Demo
So make it block or inline-block
Demo
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.
Below is a document tree with HTML as root.
HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI
For example, the following rule inserts the string "Note: " before the content of every P element whose "class" attribute has the value "note":
p.note:before { content: "Note: " }
The formatting objects (e.g., boxes) generated by an element include generated content. So, for example, changing the above style sheet to:
p.note:before { content: "Note: " }
p.note { border: solid green }
would cause a solid green border to be rendered around the entire paragraph, including the initial string.
The :before and :after pseudo-elements inherit any inheritable properties from the element in the document tree to which they are attached.
For example, the following rules insert an open quote mark before every Q element. The color of the quote mark will be red, but the font will be the same as the font of the rest of the Q element:
q:before {
content: open-quote;
color: red
}
In a :before or :after pseudo-element declaration, non-inherited properties take their initial values.
So, for example, because the initial value of the 'display' property is 'inline', the quote in the previous example is inserted as an inline box (i.e., on the same line as the element's initial text content). The next example explicitly sets the 'display' property to 'block', so that the inserted text becomes a block:
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element.
For example, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: 'Some'; }
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }
Similarly, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; }
h2:after { display: block; content: 'Thing'; }
<p> Text </p>
...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
<p> Text </p>
Basically, :before (like :after) is a CSS pseudo-element. So it's almost like a HTML inline element. Almost.
To play with pseudo elements, you need to give it a content property (empty string in most cases). Note that it's an inline element by default, so it can't have width / height. You need to set display: block (or inline-block, or whatever).
I think you missed to set the relative position on the parent element (.parent). There it is :
.parent{
position: relative;
top:500px;
width:400px;
border:1px solid green;
}
Try looking at this article. it explains how :before and :after pseudo selectors work:
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Related
I know how to display one div when you hover over another using the CSS:
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
But the new div is displayed underneath the hover div.
How can i have a div that when you hover it, displays another div that may be somewhere else on the page e.g above the hover one.
Rather than it displaying under the hover div.
If your HTML still looks like
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
In that case, you can just assign an absolute or fixed position to the div with class showme and still use the same CSS.
If the showme div cannot be a child of the showhim div, then you can try placing it as a sibling.
<div class="showhim">HOVER ME</div>
<div class="showme">hai</div>
Once that is done, you can modify your CSS in the following manner
.showme {
display: none;
}
.showhim:hover ~ .showme {
display: block;
}
The ~ can be used to select sibling elements that appear after the current element.
You can do something like this:
.showhim{
margin-top:50px;
}
.showme {
display: none;
}
.showhim:hover .showme {
display:block;
border:1px solid red;
position:absolute;
top:0;
left:0;
font-size:25px;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
If Javascript is an option, you can easily toggle the display property like this:
var showmeElement = document.getElementsByClassName('showme')[0];
function toggleSibling(shouldShow) {
if(shouldShow) {
showmeElement.style.display = 'block';
} else {
showmeElement.style.display = 'none';
}
}
.showme {
display: none;
}
<div class="showme" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">B</div>
<div class="showhim" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">A</div>
Otherwise, with CSS, the only way to target showme using showhim is by sibling / children selectors, with showhim being higher in hierarchy (children) or simply higher in DOM (as siblings).
Keep in mind that CSS can not go upwards in DOM in order to style elements conditionally, but only downwards.
Basically you want to shift the child div above its parent when the parent is hovered. If you know about positioning then you can use it. If you don't know then follow this code snippet.
div{
height: 30px;
}
.parent:hover .child{
position: relative;
bottom: 30px;
}
.parent:hover + .brother{
position: relative;
left: 30px;
}
<div class="parent">
hoverme
<div class="child">hi</div>
</div>
<div class="brother">brother</div>
Here I assigned the child a relative position which allows you to move it relative to its current position and bottom property pushes it above 30px. Here if you don't want any overlapping then you will have to keep account for the height of parent or in this case parent div. relative position will be better then absolute. Also sibling movement is possible and is shown in the css.
For a project I need to get the Font Awesome quote icons right before and after the <p> content. Right now it displays itself above and beneath it at all times.
Here is the HTML:
<blockqoute>
<p><strong>Text</strong></p>
</blockqoute>
And the CSS I'm using:
blockquote {
border: none;
&:before {
.fa();
content: #fa-var-quote-left;
position: relative;
display: inline-block;
}
&:after {
.fa();
content: #fa-var-quote-right;
display: inline-block;
position: relative;
float: right;
}
}
This is what I'm getting:
The qoute icons need to start right in front of the text, and right after too.
I'm using the CMS Typo3.
you need all your elements on the same block level.
while your :before is inline-block the following ´p´ is by default block, so every inline-element before or after are separated by newlines.
I assume you need to set
blockquote p { display: inline-block; }
You need to add the ::before and ::after pseudo-elements to the paragraph element, and remove the float from the after pseudo-element – because p is a block level element, they will be on their own, new lines if you apply the pseudo-elements to the containing block.
blockquote p {
&::before {
.fa();
content: #fa-var-quote-left;
}
&::after {
.fa();
content: #fa-var-quote-right;
}
}
The position and display properties are probably not needed, it depends on what other styles you will apply.
I wrote some CSS for a tool tip
.toolTip{
display:inline;
position:relative;
}
.toolTip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
HTML
<p title="tester" class="toolTip">test</p>
<img src="images/people/Tapolci_Jeff_abg_web.png" class="toolTip" title="Jeff T." alt="Jeff Tapolci" />
It only works with the text, but not the image. How can I fix this?
Fiddle
It is important to note that img elements are replaced elements so psuedo elements such as :before or :after will not work unfortunately. You should wrap it in, say, a span and add the class to that.
Demo Fiddle
Replaced Elements:
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independant of the CSS. Typical replaced elements
are <img>, <object>, <video> or forms element like <textarea>,
<input>. Some elements, like or are replaced elements
only in specific cases. Object inserted using the CSS content
properties are anonymous replaced elements.
Can you please let me know how I can force CSS to make the line-through property wider than element width?
For Example
<h3 style="text-decoration:line-through">50</h3>
and result looks like now how I can make the line wider than element to be more obvious?
Like
You can use which is a cheesy way to go for
<div> HELLO </div>
Demo
Or you can do is, use :before and :after pseudo with content property
Demo
div {
text-decoration:line-through;
}
div:before,
div:after {
content: "\00a0\00a0";
}
Note: Using a general selector here, consider using class or an id to target the element specifically, also, if your text is between other text, consider wrapping that in a span and than use :before and :after over span.
Briefing an answer here with solution that uses CSS Positioning techniques, using which you can also control the thickness of the strike through..
Here, am positioning the child element absolute to the parent element. So make sure you declare position: relative; on parent. Rest, :after pseudo handles the rest and also be sure that you use content: "";, though it's blank, it's mandatory.
Demo 3 (Using CSS Positioning)
div {
position: relative;
display: inline-block;
padding: 0 10px;
margin: 10px;
}
div:after {
content: "";
position: absolute;
border: 2px solid #000;
top: 50%;
margin-top: -1px;
width: 100%;
left: -2px;
}
padding: N px;
line-height: N px;
in html
Nested Div's <div><div></div></div>
In the following case, how can I make it such that the text generated by the :after is outside the box of the span? (It currently is rendered inside, i.e. it makes the span element wider)
HTML
<span class="my">Boxtext</span>
CSS
span.my {
padding: 4px 8px;
background-color: red;
display: inline-block;
border-radius: 10px;
margin-left: 20px;
}
span.my:after {
content: " text that is supposed to come after the box";
}
I guess this is somewhat similar to list-style-position, where you can chose inside or outside...
I believe CSS content is considered part of the object against which it was rendered. You could make the argument that :after should have been named :append.
For your case you can try putting an extra element inside span.my:
<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }
Or styling the content specifically.
span.my:after {
content: " text that is supposed to come after the box";
background-color: white;
position: absolute;
margin-left: 10px;
}
Just use position: absolute in the ::after {} pseudo-element's css:
span.my:after {
content: " text that is supposed to come after the box";
position: absolute;
left: 100%;
}
Remember, of course, to use position: relative; (or any other position value) on the parent span.my element.
JS Fiddle demo.
Also remember that as the ::after (and the ::before) pseudo-element inherits from the span to which it's 'attached' that it'll inherit the width, so that may need to be explicitly overridden in the CSS for that/those elements.