質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

10064閲覧

擬似要素afterがposition:absoluteで設置しても、表示されずまたずれている

SugiuraY

総合スコア317

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2019/04/25 23:41

下記のように、擬似要素:afterでboxを.button-5の真下に表示したいと考えております。
しかしながら、以下のコードでは表示されず、またDevelopertoolで見ると非表示ながらもその位置は
真下ではなく右にずれています。

JSFiddle

これらの原因と、真下に表示させる方法について、アドバイスいただけますでしょうか?
よろしくお願い申し上げます。

html

1<div class="button-5"> 2 <div class="eff-5"></div> 3 <a href="#">AAA</a> 4</div>

css

1.button-5{ 2 background:#6ce890;; 3 font-family: "Raleway", Helvetica, sans-serif; 4 font-size: 0.8em; 5 width:115px; 6 /* height:50px; */ 7 /* border:2px solid #34495e; */ 8 float:left; 9 text-align:center; 10 cursor:pointer; 11 position:relative; 12 box-sizing:border-box; 13 overflow:hidden; 14 margin-left: auto; 15 /* margin:0 0 40px 0; */ 16} 17.button-5 a{ 18 /* font-family:arial; 19 font-size:16px; */ 20 color:#34495e; 21 text-decoration:none; 22 border-bottom: none!important; 23 line-height:50px; 24 transition:all .5s ease; 25 z-index:2; 26 position:relative; 27} 28.eff-5{ 29 width:140px; 30 height:60px; 31 left:-140px; 32 top:-50px; 33 background:#c7c7c778; 34 position:absolute; 35 transition:all .5s ease; 36 z-index:1; 37} 38.button-5:hover .eff-5{ 39 left:0;top:0; 40} 41 42.button-5:after{ 43position:absolute; 44content: ""; 45top:55px; 46width:100px; 47height:100px; 48background:#c7c7c778; 49transition:all .5s ease; 50z-index:1; 51}
Lhankor_Mhy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

overflowプロパティに hidden を指定していることにより、button要素内の内容は、button要素のパディングボックスに合わせて切り取られます。また、絶対配置した要素は高さが 0 として扱われます。そのため、絶対配置した要素をbutton要素の外に配置している状態では、絶対配置した要素は表示されません。

今回の場合、 HTML の構造を変更しないのであれば、質問者さんの実現したいことは以下のように行えると思います(動作確認用リンク)。

HTML

1<div class="button-5"> 2 <div class="eff-5"></div> 3 <a href="#">AAA</a> 4</div>

CSS

1.button-5 { 2 --btn-height: 50px; 3 background: linear-gradient(#6ce890 var(--btn-height), transparent var(--btn-height)); /* 修正 */ 4 font-family: "Raleway", Helvetica, sans-serif; 5 font-size: 0.8em; 6 width: 115px; 7 float: left; 8 text-align: center; 9 cursor: pointer; 10 position: relative; 11 box-sizing: border-box; 12 overflow: hidden; 13 margin-left: auto; 14} 15 16.button-5 a { 17 color: #34495e; 18 text-decoration: none; 19 border-bottom: none !important; 20 line-height: var(--btn-height); /* 修正 */ 21 transition: all .5s ease; 22 z-index: 2; 23 position: relative; 24} 25 26.eff-5 { 27 width: 140px; 28 height: var(--btn-height); /* 修正 */ 29 left: -140px; 30 top: -50px; 31 background: #c7c7c778; 32 position: absolute; 33 transition: all .5s ease; 34 z-index: 1; 35} 36 37.button-5:hover .eff-5 { 38 left: 0; 39 top: 0; 40} 41 42.button-5::after { 43 display: block; /* 追加 */ 44 content: ""; 45 width: 100px; 46 height: 100px; 47 background: #c7c7c778; 48 transition: all .5s ease; 49 z-index: 1; 50}

投稿2019/04/26 01:18

編集2019/04/26 01:37
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/04/26 01:34

コメントありがとうございます。 やろうとしたことが実現できたのはとてもうれしいのですが、正直わからないという状態です。 --btn-height やvarという記法を初めて見て検索してみたのですが、https://developer.mozilla.org/ja/docs/Web/CSS/var が出てきました。恐らく変数的にスタイルを使用できることかと思いますが、「--」の接頭辞は決まりなのでしょうか?この点調べても当たり前のように書かれていて出てこなかったので、ご教示いただけますでしょうか? 宜しくお願い申し上げます。
s8_chu

2019/04/26 01:43

もし質問者さんの問題が解決されたのであれば、質問を解決済みにしていただけませんか?
SugiuraY

2019/04/26 02:05

承知をいたしました。 お力添えに御礼申し上げます。 宜しくお願い申し上げます。
guest

0

overflow: hidden; なので範囲外は表示されないし、leftもrightもないのでanchorの次に位置しています。

CSS

1.button-5 { 2 overflow: visible; 3} 4 5.button-5:after { 6 left: 0; 7}

投稿2019/04/26 00:43

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2019/04/26 01:16

コメントありがとうございます。 ずれに関しては納得いたしました。左右を指定しない場合には、anchorの次の位置のなるのですね。 非表示については、微妙に問題が残るのですが、.eff-5が表示範囲に入るまでに隠しているので、visibleに設定すると、右上に常に.eff-5が見えてしまっています。 eff-5はhiddenでafterは範囲外で見えるようにするというのはもはや構造上無理があるので、仕組み自体を再考すべきでしょうか?もし、現状を生かしつつこんな方法がというものがあればアドバイスいただければと思います。button-5の範囲を下に広げておくというのも思いついたりするのですが、今試行錯誤試しにいじっています。。。簡単にうまくはいかないですが。。
x_x

2019/04/26 01:21

質問内容に答えただけで、わたしには .eff-5 が何をするのかもわからないので代案は出せないですね。 要件を明らかにしてはいかがでしょうか?
SugiuraY

2019/04/26 01:46

失礼いたしました。 .eff-5は.button-5の左上に隠れており、hoverによってleft:0;top:0;の位置つまり、button-5に重なります。 要件としては、この動作を維持しつつ、afterを使用して、.button-5の直下に疑似要素のBOXを表示させようとしております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問