hifi-dev

ブロックの内側にボーダーを表示

2014年12月20日 css , html

大枠のブロックの内側にボーダーを表示する必要があったので備忘録。

そもそも大枠に擬似要素position: absoluteをかけてボーダーを表示させていたが、
ブロック内のaタグが押せなくなるため内側に表示させるようにしました。

まずはその失敗版です。

html

<div class="block">
<p><img src="http://placehold.jp/150x150.png" alt="" width="150" height="150"></p>
<div class="info">
<p><a href="dummy.html">テキストテキストテキストテキストテキスト</a></p>
<!-- /.info --></div>
<!-- /.block --></div>

続いてcss。

css

p {
	margin: 0;
}
.block {
	position: relative;
	width: 150px;
}

.block:hover::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 4px solid rgba(255,0,0,.5);
}

失敗版のサンプルは以下です。

サンプル

上記の失敗があったのでblockにボーダーを付けます。
ただそのままだと外側についてサイズがおかしくなるのでボーダー分だけネガティブマージンを内側の要素に指定します。

htmlは上記と同じです。

css

p {
	margin: 0;
}
.block {
	overflow: hidden;
	width: 150px;
}
.block:hover {
	width: 142px;
	border: 4px solid rgba(255,0,0,.5);
}
.block:hover img {
	margin: -4px -4px 0 -4px;
}
.block:hover .info {
	margin: 0 -4px -4px -4px;
}

blockにoverflow: hiddenを付けるのがキモです。
そして内側のイメージとinfoにネガティブマージンを付けます。

サンプルは以下。

サンプル

css , html kenboh

ads