html - 将元素(使用 ':before' )向右对齐

Question

我有 2 个图标需要与网站的左右边缘对齐，默认情况下左侧对齐，所以我的问题是将“nextArrowIcon”元素对齐到右侧。我正在尝试使用“ margin :自动”，但它不起作用。我需要它使用“:before”选择器工作。

如有任何帮助，我们将不胜感激。

PD:我更喜欢避免 float 解决方案。

这是相关代码。

 

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>

这是一个 CODEPEN

Answer 1

将每一个a标签放入一个DIV中，使用绝对定位，左或右对齐。但是，请注意父 div 的样式必须为 position:absolute 或 position:relative。 请注意，默认样式为 position:static，这与 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>