.side-corner-tag {
position: relative;
color: #fff;
display: inline-block; ←こいつが原因
overflow: hidden;
font-family: Arial, sans-serif;
font-weight: 900;
}
実現の為に無駄なタグを設置しすぎかなァと思います。
リボンの為にpタグとspan、全体を囲うためのdiv.side-corner-tagが余計にゴテゴテ付いている事がわかりづらくなっている原因です。
HTML
1<a class="item-image" href="gallery-single.htm">
2 <img alt="Gallery" src="~省略~">
3 <i class="ribbon">リボン</i>
4</a>
CSS
1.item-image {
2 width: 100%;
3 height: 180px;
4 margin: 0px;
5 position: relative;
6 overflow: hidden;
7}
8
9.side-corner-tag p:before
10 ↓クラス名をこんな感じに付け直す
11.item-image i.ribbon:before
未確認なので動くかは検証していませんが、後々さっぱりすると思います。
リボンはposition: absolute
で実現しているので
リボンのi要素は本来は斜体文を表しますが、最近のページではアイコンとして使われる事もあります。
文章が無駄なものだらけでだらだら綴られるより、短い単語でバシッと表現したほうが分かりやすいのと同じように、
HTMLもタグが少なければ少ないほど良いものなので工夫してみてください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。