Having trouble with background positioning using :before

HTML & CSS
1

URL: http://goo.gl/QDfnhh

I’m using this code to add the background images to the entry titles on this blog:


.entry-title:before {
	content: " ";
	background: url(images/swirl-left.png) no-repeat 0 5px;
	height: 20px;
	position: absolute;
	width: 45px;
	top: 0;
}

.entry-title:after {
	content: " ";
	background: url(images/swirl-right.png) no-repeat 5px 5px;
	height: 20px;
	position: absolute;
	width: 45px;
	top: 0;
}

The .entry-title:after is working just fine, but not the .entry-title:before. How can I get the background image on the left to be next to the title instead of on top of it?

2

Absolute positioning takes an element out of the normal flow. This means that your generated content is not affecting the positioning of the other content around it, as such it appears to be “on top” of your headline text.

You could:

Add

.entry-title { padding-left : 45px;}
.entry-title:before {left:0;}

It may be better to rethink your entire strategy:



.entry-title:before, .entry-title:after ,.entry-title a {        

        vertical-align:middle; 
}
.entry-title:before, .entry-title:after {
	content: "";
	background: url(images/swirl-left.png) no-repeat 0 5px;
	height: 20px;
	width: 45px;
        display: inline-block;
}

.entry-title:after {
	background: url(images/swirl-right.png) no-repeat 5px 5px;
}

or even:

.entry-title:before, .entry-title:after ,.entry-title a {        
         vertical-align:middle;
         display: inline-block;
	 word-spacing: normal;
	 letter-spacing: normal;
}
.entry-title:before, .entry-title:after {
	content: "";
	background: url(images/swirl-left.png) no-repeat 0 5px;
	height: 20px;
	width: 45px;
        margin-right:  -45px ; 
}

.entry-title:after {
	background: url(images/swirl-right.png) no-repeat 5px 5px;
        margin: 0 0 0  -45px ; 
}
.entry-title a{padding: 0 45px;}
.entry-title{ display: table;
	word-spacing: -1em;
	letter-spacing: -.5em;
}

In this way your flourishes would actually FLOW around your headline

hope that helps

3

Thank you so much. That helps a ton. I’m new to using the :before and :after stuff so I’m trying to learn as much as I can.

Thanks again!