This question already has answers here:
Border length smaller than div width?
(13 answers)
Closed 6 years ago.
I need help on border-bottom length. I want to set border-bottom length to 60%. I can do it using the inner div like:
#myDiv {
background: #FED;
_border-bottom: 5px solid red;
}
#myDiv div {
margin: 5px 0px;
width: 60%;
height: 5px;
background-color: red;
}
<div id="myDiv">
My div
<div></div>
</div>
But i don't want to use it with extra div, I want to achieve it using border-bottom, I search for this in google and stack but no luck.
Thanks in advance.
You can use pseudo element like this:
#myDiv {
background: #FED;
position: relative;
}
#myDiv::after {
content: "";
width: 60%;
height: 5px;
background: red;
position: absolute;
bottom: -5px;
left: 0;
}
<div id="myDiv">
My div
</div>
Related
This question already has answers here:
Rounded highlighter marker effect in CSS
(2 answers)
Curved end of border-bottom in CSS
(4 answers)
Closed last year.
So when I say border - i mean as in border-bottom: 10px solid red - so I can make this no longer a rectangle, but a rounded rectangle?
.item {
border-bottom: 10px solid red;
width: 100%;
height: 50px;
float: left;
display: block;
}
<div class="item">This is a div</div>
Don't use a border on the element itself. You can't make just the bottom border into a rounded rectangle, using things like border-radius will only round the bottom corners of the bottom border.
Instead, use the ::after pseudo element:
.item {
width: 100%;
height: 50px;
float: left;
display: block;
position: relative;
}
.item::after {
content: " ";
display: block;
width: 100%;
height: 10px;
background: #f00;
border-radius: 5px;
position: absolute;
bottom: 0;
}
<div class="item">This is a div</div>
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
How does z-index work with its default values?
(1 answer)
All About.... Z-Index?
(4 answers)
How does the z-index property really work?
(5 answers)
Closed 1 year ago.
I try to learn how to use pseudo elements in CSS and I am facing a problem. I try to create a container that contains some text and a pseudo element.
But I wan't the pseudo element to be behind the elements text but before the background color. I don't know how to achieve this.
I want the pseudo element to be part of and before the background color. But to be behind the containers actual content.
Here is a short snippet of the exact problem I am facing:
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
<div class="container">
<h1>This is a title</h1>
</div>
Just set z-index to childs of container.
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
.container>* {
position: relative;
z-index: 2;
}
<div class="container">
<h1>This is a title</h1>
</div>
This question already has answers here:
Keep div at the bottom of another div - css
(5 answers)
Closed 4 years ago.
I have a question for those frontend people out here:
How do I position a div at the bottom of its parent?
In my body-tag, which is for example 100px tall, I have a div, which is 10px tall.
How can I now make the div go to the bottom of the body tag, instead of going to the top?
I seriously can't figure that out!
Greetings
Alex
Its pretty easy, this is how you do it.
First you define position: relative to parent
Second you define position: absolute to child
Using top, left, right, bottom you can position child element where you want.
.parent {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #ccc;
}
.child {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
background-color: #000;
}
<div class="parent">
<div class="child">
Example text
</div>
</div>
Like that:
div{
background-color:red;
width:100px;
height:300px;
position:relative;
}
div > div{
background-color: blue;
width:100px;
height:100px;
position:absolute;
bottom:0px;
}
<div>
<div>
</div>
</div>
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
How can I display a DIV which is bigger than its ancestor, when the ancestor DIV has style overflow: hidden; position: relative;?
Here is an example:
HTML:
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
CSS:
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: 10em;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: visible;
border: 5px solid red;
}
Here is this example on JS Fiddle.
I tried styling the content DIV with various combinations of position: absolute, overflow: visible, right: -100px, but it didn't help.
How can I style the content div so that it is entirely visible?
I cannot modify the parent DIV with container class, only the content inside.
if you want the content's position to be tied to the container, you basically can't unless you use javascript to update the position on scroll and set the position of the content to be fixed instead of absolute.
Actually you can't show div inside element using overflow:hidden, But I have solution for you.
You can give your div with overflow:auto, so user can scroll x
Here the example fiddle
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: auto;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: auto;
border: 5px solid red;
width: auto;
padding: 10px;
}
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
This question already has answers here:
CSS overflow hidden with absolute position
(3 answers)
Closed 8 years ago.
Why my div positioned as absolute didn't get out of the flow and get hidden by a mom div her overflow set to hidden ?
How can i show my div positioned to absolute ?
here's a FIDDLE
HTML :
<div class="div1">
<div class="div2">
<div class="div3">ccccc</div>
</div>
</div>
CSS :
.div1 {
overflow: hidden;
width: 60px;
height: 20px;
background-color: antiquewhite;
}
.div2 {
position: relative;
}
.div3 {
position: absolute;
right: -10px;
}
Your problem is with your "div3" class.
Try this:
.div3 {
position: absolute;
}
That should fit nicely.
Now if you want it to be centered, then just go:
.div3 {
position: absolute;
width: 100%;
text-align: center;
}
EDIT:
If you insist, then the easiest will be to have a counter on the same element. Try this then:
.div3 {
position: absolute;
right: -10px;
padding-right: 10px;
}
Hope this helps.