Is it possible to keep text center and middle aligned within the content provided in the pseudo element before and after? I am trying to keep a paragraph centered in the middle of the brackets.
http://jsfiddle.net/c6dofq3z/
p:before {
display: inline-block;
height: 150px;
float: left;
content: "{";
color: #F1722E;
font-size: 90px;
}
p:after {
display: inline-block;
height: 50px;
float: right;
content: "}";
color: #F1722E;
font-size: 90px;
}
Sure, position them absolutely and use translations to ensure vertical-alignment:
p {
position: relative;
}
p::before {
content: "{";
left: 0;
}
p::after {
content: "}";
right: 0;
}
p::before, p::after {
top: 50%;
color: #F1722E;
font-size: 90px;
position: absolute;
transform: translateY(-50%);
}
Fiddle: http://jsfiddle.net/jonathansampson/c6dofq3z/3/
In this situation you would want to use some relative and absolute positioning, you will also have to set a width for the paragraph.
p {
position: relative;
top: 0;
left: 0;
width: 250px;
}
http://jsfiddle.net/c6dofq3z/1/
Related
I try to get the same wave symbol underneath my headers as shown in this website http://harbr.co/ but it's not working. So far, I have the following CSS:
H2::after {
content: url ('images/wave.png');
position: absolute;
}
Help?
body { background-color: gray; }
h2:after {
content: "";
width: 42px;
height: 8px;
background: url('http://harbr.co/wp-content/themes/harbr2015/img/icons/divWave-sprite.png');
background-size: 100px 250px;
background-position: -50px -50px;
position: absolute;
top: 1em;
}
<h2></h2>
You have an extra space between url and (.
H2::after {
content: url('images/wave.png');
position: absolute;
}
https://jsfiddle.net/qst68fLd/
I want to put a coloured circle at the left side of horizontal rule.
Below is what I have used to display a circle at the beginning of a horizontal rule. It works in all modern browsers except IE 11 and Edge. I have tried everything I can think of and search endlessly. Can anyone help?
.leftArticle hr:before {
display: block;
content: "";
width: 12px;
height: 12px;
background: #4990cd;
top: 50%;
margin-top: -7px;
right: -3px;
z-index: 1;
border-radius: 6px;
}
Dont use pseudoelements with hr.
.leftArticle {
position: relative;
}
.leftArticle:before {
position: absolute;
left: 0;
top: 50%;
display: block;
content: "";
width: 12px;
height: 12px;
background: #4990cd;
margin-top: -7px;
right: -3px;
z-index: 1;
border-radius: 6px;
}
<div class="leftArticle">
<hr>
</div>
Display issues:
hr {
height: .9em;
overflow: hidden;
background-color: pink;
}
hr::before {
content: 'demo of this problem';
}
<hr>
I'm trying to put an image on the right and left edges of the container's with the :before and :after.
But for some reason the containers totally .... up when I add a position absolute to the before and afters...
It has probably something to do with the standard bootstrap before and afters on the containers
Any idea how I can go around this?
.header,
.spotlight,
.main,
.footer {
>.container {
position: relative;
&:before {
content: " ";
position: absolute;
background: url("../img/right.png");
height: 100%;
display: block;
width: 6px;
right: -6px;
z-index: 999999;
top: 0;
}
&:after {
content: " ";
position: absolute;
background: url("../img/left.png");
height: 100%;
display: block;
width: 6px;
left: -6px;
z-index: 999999;
top: 0;
}
}
}
Example how the shadow(image) should look
I have a psuedo element which is a pink background inside a div like so:
<div>
Hello
</div>
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
}
div::after {
content: "";
background-color: pink;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Also here is a codepen to show what I mean: http://codepen.io/acha5066/pen/oXVPzg I want the pink background in front of the green background but behind the text Hello. How can I achieve this?
div {
background-color: green;
display: inline-block;
padding: 20px;
position: relative;
z-index: 0 /* we etablish a new stacking context */
}
div::after {
content: "";
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1
}
<div>
Hello
</div>
A good article that will help you to understand the stacking context: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here