[解決済み] ボーダーの長さがdivの幅より小さい?
2022-05-25 05:46:24
質問
次のようなコードがあります。
div {
width:200px;
border-bottom:1px solid magenta;
height:50px;
}
divの幅が200pxなのでborder-bottomも200pxですが、divの幅を変えずにborder-bottomを100pxだけにしたい場合はどうしたらよいでしょうか?
どうすればいいのでしょうか?
擬似要素を使用することができます。例
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
IE8から:afterにも対応しましたので、体裁上余計なマークアップは不要です。
を編集します。
右寄せのボーダーが必要な場合、単に
left: 0
を
right: 0
中央揃えのボーダーが必要な場合は、単純に
left: 50px;
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み] ボーダーをdivの内側、端に配置しない
-
[解決済み] CSSで背景画像を幅に合わせ、高さは比例して自動縮小する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] XHTMLの自己完結型タグを除くオープンタグにマッチするRegEx
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] HTMLのid属性とname属性の違い