× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Create Left Arrow with CSS before & after pseudo elements

Mar 16, 2015
<p>You can rotate the arrow 180deg like this :</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 10px 15px 10px 10px; position: relative; text-decoration: none; } .left{ -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); } a:before, a:after { border-right: 2px solid; content: ''; display: block; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 10px; top: 50%; width: 0; } a:after { margin-top: -1px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } a:hover, a:focus, a:hover:before, a:hover:after, a:focus:before, a:focus:after { color: #000; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="arrow"&gt;&lt;/a&gt; &lt;a class="arrow left"&gt;&lt;/a&gt;</code></pre> </div> </div> <p></p> <p>You can also achieve the same output with <code>scaley(-1)</code> instead of rotate.</p> <p>Also there are way simpler ways to make this arrow, you might want to check this post with a great list of arrows like this one : <a href="http://stackoverflow.com/questions/27492191/how-to-make-a-fancy-arrow-using-css">How to Make A Fancy Arrow Using CSS?</a></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29028665/Create%20Left%20Arrow%20with%20CSS%20before%20&amp;%20after%20pseudo%20elements/29028754">Stack Overflow</a>.</p>
comments powered by Disqus