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>
Related
I am trying to achieve something like this:
I tried to use the pseudo-element :after like this:
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
&:after {
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
img {
max-width: 100%;
}
}
It doesn't seem to work. Do I have to use 2 elements to achieve this? Or I can use just 1 element?
Because the image is responsive, the border should "follow" the width and height of the image element.
Your pseudo-element is actually styled correctly, and you are one small step away to get it to work: you just need to declare content: '' on it. Without a defined content property, the pseudo-element will not be rendered. This is because:
On elements, content always computes to normal. On ::before and ::after, if normal is specified, computes to none.
By extension of logic, an element without any content will not be rendered.
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
}
.drink:after {
content: ''; /* Added this rule */
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
.drink img {
max-width: 100%;
}
<div class="drink">
<img src="http://via.placeholder.com/300x500" />
</div>
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.
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;
}
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}
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.