Menu
I d'like to use CSS pseudo elements to add an icon before a DIV. I created a JS Fiddle for that. The problem is, that the before pseudo element doesnt takes the whole height. I d like that it has the same height as the div. Currently it only takes the height needed by the icon.
<div class="icon"><p>Lorem Ipsum...</p><p>Lorem Ipsum...</p><p>Lorem Ipsum...</p><div>
http://jsfiddle.net/marcbaur/veq13ohs/
Is there someone having an idea on how to fix this?
Greets
311
The single colon syntax (e.g. “:before” or “:first-child”) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3.
Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state to the DOM. Pseudo-elements act as if you had added a whole new element to the DOM, and enable you to style that.
The :hover is pseudo-class and :before & :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class.
Inline styles cannot be used to style pseudo-elements and pseudo-classes. For example, you can style the visited, hover, active, and link colors of an anchor tag using external and internal style sheets.
I think you want to do something like this. Keep in mind for setting height for :before I have used position: absolute and for the parent position: relative.
.icon {
background-color: blue;
position: relative;
padding-left: 54px;
border: 1px solid red;
}
.icon:before {
width: 50px;
display: block;
content: url("http://www.alsacorp.com/catalog/images/C_world_icon.jpg");
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}<div class="icon">
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
<p>Lorem Ipsum...</p>
<div>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
