As we discovered in the previous chapter, pseudo-selectors can be treated as elements and styled without the need to add additional markup to the
HTML page. If we set the <a>
element to position:relative
, and both :after
and :before
to position:absolute
, we can place them using coordinates relative to the position of <a>
. Let's try this by creating an application.css
file in a css
folder within the project:
/* link */ #arcade_game a{ display: block; position: relative; text-transform: uppercase; line-height: 100px; text-decoration: none; font-family: 'Frijole', cursive; font-size: 40px; width: 300px; padding: 10px 0px 10px 120px; margin: 0px auto; color: rgb(123,26,55); } /* :before and :after setup */ #arcade_game a:before, #arcade_game a:after{ content: ""; display: block; position: absolute; left: 0px; top: 50%; } /* :before */ #arcade_game a:before{ z-index: 2; width: 70px; height: 70px; line...