CODEWITHSUNDEEP
htmlcss
GhostOrder
GhostOrder

Reputation: 663

align item (that uses ':before') to the right

I have 2 icons that I need align to left and right edge of the site, the left is per default so my problem is align 'nextArrowIcon' item to right. I was trying using 'margin:auto' but it doesn't work. I need it work using ':before' selector.

Any help would be appreciated.

PD: I prefer avoid float solutions.

Here is the relevant code.

 

h2#title{
    margin:0;
    padding:0;
	font-size:1.8em;	
	font-family:Patua One;	
	position:absolute;  
	left:50%;
	transform:translateX(-50%);
}
.buttons{
	background:yellow;
}
.mainIcon:before{	
	content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");	
}
.nextArrowIcon:before{	
	content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png");	
	margin-left:auto;
}
  

<header id="carouselHeader">
	<h2 id="title">TITLE</h2>
	<div class="buttons">
		<a href="#"><i class="mainIcon"></i></a>
		<a href="#"><i class="nextArrowIcon"></i></a>			
	</div>
</header>

And here is a CODEPEN

Upvotes: 1

Views: 42

Answers (3)

AVI
AVI

Reputation: 5703

what i have done is i just gave .nextArrowIcon:before property to float right because by default it aligned left and i made background color !important. I didn't created any divs because you said,

I need it work using ':before' selector.

So, you can try following,

Here's the CODEPEN example

/********** FORMAT **********/
html, body, header, a, h2 {
	margin: 0;
	padding: 0;
	border: 0;	
	font: inherit;
	vertical-align: baseline;
}
html{
	width:100%;
	background:white;	
	font-family:'Open Sans', serif;
	font-size:10px;		
}
/********* CONTENT *********/
h2#title{
	font-size:2.4em;	
	font-family:Patua One;	
	position:absolute;  
	left:50%;
	transform:translateX(-50%);
}
.buttons{
	background:yellow !important; 
}


.mainIcon:before{	
	margin:0;
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");	
}
.nextArrowIcon:before{	
float:right;
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png");	
	margin-left:auto;
}
<header id="carouselHeader">
		<h2 id="title">TITLE</h2>
		<div class="buttons">
			<a href="#"><i class="mainIcon"></i></a>
			<a href="#"><i class="nextArrowIcon"></i></a>			
		</div>
	</header>

Upvotes: 2

xkurohatox
xkurohatox

Reputation: 198

Add float:right such that:

.nextArrowIcon:before{  
content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png"); 
margin-left:auto;
float:right;
}

Hope this helps. :)

Upvotes: 2

cssyphus
cssyphus

Reputation: 40076

Put each a tag into a DIV, and use absolute positioning to align left or right. HOWEVER, note that the parent div must be styled either position:absolute or position:relative. Note that the default styling is position:static, which is almost identical to position:relative.

h2#title{
    margin:0;
    padding:0;
	font-size:1.8em;	
	font-family:Patua One;	
	position:absolute;  
	left:50%;
	transform:translateX(-50%);
}
.buttons{
  position:relative;
	background:yellow;
}
#btnLeft {position:absolute;left:0;}
#btnRight{position:absolute;right:0;}
.mainIcon:before{		content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/main_icon_zpsrtoqnv5h.png");	
}
.nextArrowIcon:before{	
	content:url("http://i183.photobucket.com/albums/x312/Tiefnuker/next_arrow_button_zps3skd2ok8.png");	
	margin-left:auto;
}
<header id="carouselHeader">
	<h2 id="title">TITLE</h2>
	<div class="buttons">
      <div id="btnLeft">
		<a href="#"><i class="mainIcon"></i></a>
      </div>
      <div id="btnRight">
		<a href="#"><i class="nextArrowIcon"></i></a>			
      </div>
	</div>
</header>

Upvotes: 2

Related Questions