i am trying to create a line towards the left side of this image using psedo elements and absolute positioning. somehow the line is not appearing , the HTML and CSS i have used for this is pritty straightforward .
HTML :
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="" class="img-responsive">
CSS :
img {
position: relative;
width:400px;
}
img:before {
content: ' ';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
z-index: 999;
}
Why is a line not appearing towards the left side of the image ?
FIDDLE HERE
Why is a line not appearing towards the left side of the image ?
Because image tag doesn't have content, so :after and :before pseudo elements are not behave as you expect.
The best thing you can do is to wrap image into helper inline-block container:
(however, I'm not sure what shape :before is supposed to be in your case)
.wrapper img {
width: 400px;
}
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:before {
content: '';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
z-index: 999;
}
<div class="wrapper">
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="" class="img-responsive" />
</div>
:before doesn't work for img. You must add it to the wrapper div. Check this out http://jsfiddle.net/fq6q4n7L/3/
div {
position: relative;
width:400px;
display:inline-block;
}
img {
width:100%;
margin:0;
padding:0
}
div:before {
content:' ';
position: absolute;
width: 10px;
height: 15px;
right: -15px;
color: #000;
background: #000;
display:block;
z-index: 999;
}
The pseudoelement :after is like a tag that would be just before the tag that references ends. THe image tag is an open-only tag, so it can't have an :after.
For example, if we had <p>Text</p>, the pseudoelement after would me something like this: <p>Text<after>content</after><p>
Therefore, logically, it is not posible.
Related
I have text that needs to be underlined only under the middle part of the word.
I have created the fiddle and I want the underline should be centered as shown in this image.
The CSS code which I have included in the fiddle are:
.footer p
{
width: 50%;
border-bottom: 1px solid #f51c40;
}
You can use an absolutely positioned pseudo element with left: 50%; transform: translate(-50%); to automatically center it horizontally relative to the content.
.footer p {
display: inline-block;
position: relative;
}
.footer p:after {
content: "";
height: 1px;
width: 50%;
background-color: red;
position: absolute;
bottom: -.5em;
left: 50%;
transform: translate(-50%);
}
<div class="footer">
<p>ADDITIONAL INFO</p>
</div>
you can use the ::after pseudo element. if you dont know what pseudo elemts are i recommend you learn about them here since its a very important part of CSS you will use often. the ::after pseudo element is able to add content after a certain element.
you can create a border after the p element for example:
.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}
This can be done several ways and more info is needed from you...
Here is one way off the top of my head which is extremely straight forward
<div class="footer">
<p>Add<u>ition</u>al</p>
</div>
Another alternative would include using the .footer p :before and/or :after psuedo elements...
It should work like you need
footer p
{
width: 50%;
}
footer p:after {
content: '';
border-bottom: 2px #000 solid;
position: absolute;
top:40px;
left: 30px;
width:100px;
}
https://jsfiddle.net/74zgg81d/1/
The best way to do this to use the css pseudo elements ::after. Also you have to set display: inline-block and position: relative to the p element.
Please see the below snippet:
.footer p {
display: inline-block;
position: relative;
}
.footer p::after {
content: "";
width: 60px;
height: 3px;
background: black;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -3px;
}
<div class="footer">
<p>ADDITIONAL INFO</p>
</div>
I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}
The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy
.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>
Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}
I wanted to create a title thats centered within a div with two spans to the left and right of it. I managed to do so but there's two issues I just can't seem to think of a solution for.
The first involves vertically centering the two border spans with
the middle span 'Title'.
The second is having the left border expand all to the left edge of the div and vice versa for the right (obviously the width of the spans would need to be changed from the original).
Using two hrs seemed like a good idea but would it probably involve too much hacking to do something so simple.
HTML
<div id="container">
<div class="title">
<span class="border"></span>
<span>Title</span>
<span class="border"></span>
</div>
</div>
CSS
#container {background: #eee; height: 100px; width: 100%;}
.title {margin: 0 auto; text-align: center; margin-top: 20px;}
.title span:nth-child(2) {padding: 0 10px;}
.border {display: inline-block; width: 40px; background: #000; height: 1px;}
I assume that you want the lines before and after a word, than why not use pseudo elements? You will need single element, no span and no other element to achieve that effect.
Demo
I've made the below example from scratch, here, am using :before and :after pseudo to create virtual elements, and then am positioning them accordingly using position: absolute; which is set to top: 50; for vertical centering, and then am deducting the width of each pseudo element so that it doesn't overlap your word.
div {
margin: 150px;
position: relative;
float: left;
}
div:before,
div:after {
content: "";
width: 50px;
position: absolute;
top: 50%;
height: 1px;
background: #f00;
}
div:before {
left: -50px;
}
div:after {
right: -50px;
}
As you commented, if you want the lines to expand fully from edge to edge.. than wrap the text in a span and make the changes as below in your CSS
Demo 2 (Expands 100%)
<div><span>Hello</span></div>
div {
text-align: center;
position: relative;
}
div span {
background: white;
position: relative;
z-index: 1;
}
div:before {
content: "";
width: 100%;
position: absolute;
top: 50%;
left: 0;
height: 1px;
background: #f00;
z-index: 0;
}
I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.
I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.
Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.
Here's the JSFiddle: http://jsfiddle.net/9sn22/1/
<div id='mybox'>text</div>
#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}
Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.
If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this
<div>
<img src="#" />
</div>
div {
position: relative;
border: 1px solid #000;
}
img {
position: absolute;
left: -1px;
top: -1px;
}
Update: (After you added a demo)
Do you need something like this?
do you mean something like this? http://jsfiddle.net/q44k5/
html:
<div> </div>
css:
div{
border: 1px solid red;
height: 100px;
width: 100px;
position: relative;
margin: 50px;
}
div:before{
content: '';
height: 20px;
width: 20px;
position: absolute;
top: -10px;
left: -10px;
background: green;
}
try this css below
#cLeft{
position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;
try this html below
<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
Your Text here.
</div>
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.