See this css:
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
}
div:after {
content: "test";
height: 100px;
}
I'm trying to vertically center the content of div:after. How can I do that?
I cannot set line-height to px value as height of the div might be dynamic (height: 100px is just for this example, in my app it stretches according to it's content)
http://codepen.io/anon/pen/ELnsJ
You can use CSS translate.
See pen: http://codepen.io/jhealey5/pen/Jseyt
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
position: relative;
}
div:after {
position: absolute;
content: "test";
margin-top: 50%;
transform: translateY(-50%);
}
Using display:table-cell you can make it vertically align middle.
div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;
}
You can try this
CSS
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
display: table;
}
div:after {
content: "test";
display: table-cell;
vertical-align: middle;
}
Try like this: DEMO
CSS:
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
display:table;
}
div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
Related
Is there a way to get the pseudo element :after, to obey the width of my container, so it is where the orange ends (after 500px), or will :after always kick in where the content inside the element ends?
Is the margin and/or padding of my element, always going to affect the :before and :after pseudo elements? I thought they have their own margin and padding. At least being able to add a padding to my element shouldn't affect the pseudo elements should it ....
See the following codepen: http://codepen.io/anon/pen/wgaYZg
#container {
width: 500px;
background-color: orange;
display: inline-block;
padding: 50px;
margin: 50px;
}
#container:before {
background-color: grey;
content: "before";
width: 100px;
display: inline-block;
}
#container:after {
background-color: grey;
content: "after";
width: 100px;
display: inline-block;
}
<div id="container">hello world</div>
This is what I'm looking to do:
To understand pseudo element :before and :after, just think them as limited version of <span> tags, since a pseudo element can only contain image or plain text as far as I know. They don't have their own padding or margin by default.
<container><:before>normal content<:after></container>
To achieve your layout, I suggest to use position tricks without introducing any new tags.
#container {
background-color: orange;
position: relative;
width: 500px;
padding: 50px 100px;
box-sizing: border-box;
}
#container:before,
#container:after {
position: absolute;
top: 0;
bottom: 0;
}
#container:before {
background-color: grey;
content: "before";
width: 100px;
left: 0;
}
#container:after {
background-color: grey;
content: "after";
width: 100px;
right: 0;
}
<div id="container">hello world</div>
Otherwise, if you can wrap the plain text into a HTML tag, that would be easy to do with flexbox.
#container {
width: 500px;
background-color: orange;
display: flex;
}
#container span {
padding: 50px;
flex: 1;
}
#container:before {
background-color: grey;
content: "before";
width: 100px;
}
#container:after {
background-color: grey;
content: "after";
width: 100px;
}
<div id="container"><span>hello world</span></div>
There must be something that I am missing, but I am trying to use ::after in my css, but unfortunately it isn't working.
My css code is below.
.test {
height: 40px;
width: 40px;
background: #444;
}
.test::after {
position: relative;
top: 15px;
height: 240px;
width: 240px;
background: red;
}
<div class="test"></div>
You just need add content: '' to pseudo-class :after or :before and set the position to absolute.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
position: absolute;
top: 15px;
height: 240px;
width: 240px;
background: red;
content: ''
}
<div class="test"></div>
but if you want you can use it without absolute, just add some float to it, because pseudo-classes generates like inside the parent node.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
content: '';
background: red;
width: 10px;
height: 10px;
float: right;
}
<div class="test"></div>
But if you need use it like icon, inside the block better way use it with absolute.
.product-item-info::after {
background-color: #e3e3e3;
content:" ";
height:300px;
width:300px;
}
.product-item-info {
height: 300px;
}
<div class="product-item-info"></div>
Is it possible to create a color background layer as pseudo element, what I try now and is not working
.product-item-info:after {
background-color: #e3e3e3;
content:"";
height:300px;
width:400px;
}
::before and ::after are display: inline by default. You'll want to set display: block for your width and height properties to be applied:
.product-item-info::after {
background-color: #e3e3e3;
content:" ";
height: 300px;
width: 300px;
display: block; /* this is what you need */
}
.product-item-info {
height: 300px;
background-color: red; /* for demonstration purposes */
}
<div class="product-item-info"></div>
Here is an example of what you are trying to do.
Also for pseudo elements you should use "::"
.product-item-info {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.product-item-info::before {
background-color: lightgreen;
content: " ";
height: 150px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
.product-item-info::after {
background-color: lightblue;
content: " ";
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
right: 0;
}
<div class="product-item-info"></div>
I'm beginning the integration of a design.
The first navbar is always there.
Sometimes i have my second navbar.
The content is never under the navbars
These 2 navbars have to be on the top of the header.
These 2 navbars have to be "infinite" to the bottom of the page.
The body hasn't a fixed width.
<body>
<header></header>
<nav id="main-nav">main-nav</nav>
<nav id="sub-nav">sub-nav optionnal</nav>
<section id="main-section">main section</section>
</body>
I tried to put the 2 nav bloc as absolute, but my content section is not dynamicly on their left. [fiddle]
header { height: 250px; }
#main-nav {
width:150px;
position: absolute;
top: 150px;
left: 0;
}
#main-section { margin-left:150px; }
I tried float left but my nav is not over the header.
Do you have some ideas? I can use bootstrap 3 even if the design has not to be responsive
What about this solution: http://codepen.io/anon/pen/pJzReW
header {
height: 250px;
background-color: red;
}
#main-nav, #sub-nav {
width:150px;
position: relative;
float: left;
}
#main-nav {
background-color: blue;
margin-top: -100px;
height: 500px;
}
#sub-nav {
background-color: yellow;
margin-top: -50px;
height: 450px;
}
#main-section {
background-color: green;
height: 400px;
}
With position: relative; the element's original space is kept (in this case, we use it for maintaining the width), but you can move them (in this case, using a negative margin top).
Edit
In case you want the navs to touch the bottom of the page, I think this approach can be better: http://codepen.io/anon/pen/MwgJEQ?editors=110
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header {
height: 250px;
background-color: red;
}
#main-nav, #sub-nav {
width:150px;
position: absolute;
}
#main-nav {
background-color: blue;
bottom: 0px;
top: 100px;
}
#sub-nav {
background-color: yellow;
left: 150px;
top: 150px;
bottom: 0px;
}
#main-section {
background-color: green;
height: 400px;
padding-left: 300px;
}
I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?
HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
You could set the .bar div to position:fixed
JSfiddle Demo
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}