最近良く見かける'＞'での見出しやリストの項目があります。
これをテキストで打ってしまうと
＞ ここにリンクのテキスト
といったように、不格好になってしまいます。
このようになっているとかっこいいですね。
html
|
1 |
<a href="#" class="arrow">ここにリンクのテキスト</a> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.arrow { padding: 0 0 0 20px; display: block; font-size: 14px; position:relative; } .arrow:before { position: absolute; top: 8px; left: 6px; width: 6px; height: 6px; margin: auto; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform: rotate(45deg); border-top: solid 1px #7b7320; border-right: solid 1px #7b7320; } |
:beforeのabsoluteで調整してください。