-position-L4-
-HTML-
<body> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">新着情報</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </body>
-CSS-
* { margin: 0; padding: 0; } ul { width: 270px; margin: 20px; padding: 5px; background: white; list-style: none; } ul li:not(:last-of-type) { margin-bottom: 5px; } a { display: block; padding: 20px 0; background: rgba(220,20,60,0.5);/*crimson #dc143c*/ border-bottom: solid 1px red; text-indent: 120px; text-decoration: none; color: brown; position: relative; } a:before { content: ""; display: inline-block; width: 50px; height: 50px; margin-top: -25px; background: url(../images/icon3.png) no-repeat; background-size: 50px; position: absolute; top: 50%; left: 30px; } a:hover { background: rgba(222,184,135,0.5);/*burlywood #deb887*/ border-bottom-color: brown; color: white; } a:hover:before { background-image: url(../images/bg10x10.jpg); }