Menu
I'm designing a simple website and I have a question. I want after all <div> tags with class="A" to have a image separator on the bottom, right after the <div> (refer to image, section in red). I'm using the CSS operator :after to create the content:
.A:after { content: ""; display: block; background: url(separador.png) center center no-repeat; height: 29px; } The problem is that the image separator is not displaying AFTER the <div>, but right after the CONTENT of the <div>, in my case I have a paragraph <p>. How do I code this so the image separator appears AFTER <div class="A">, regardless of the height and content of div A?
888
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
Just add overflow: auto; to the <ul> . That will make it so that the text doesn't leak outside of the UL. However, depending on what you're doing, it might be easier to just make the <li> display: inline; . It totally depends on what you're doing!
::after (:after) In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
Position your <div> absolutely at the bottom and don't forget to give div.A a position: relative - http://jsfiddle.net/TTaMx/
.A { position: relative; margin: 40px 0; height: 40px; width: 200px; background: #eee; } .A:after { content: " "; display: block; background: #c00; height: 29px; width: 100%; position: absolute; bottom: -29px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
